Vue中使用icon的几种常用方法

npm install --save @fortawesome/fontawesome-free

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
library.add(faCoffee)
 
Vue.component('font-awesome-icon', FontAwesomeIcon)

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'coffee']" />
  </div>
</template>

<!-- 在 index.html 中引入 fontawesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<!-- 在组件中使用 -->
<template>
  <div>
    <i class="fas fa-coffee"></i>
  </div>
</template>

<!-- 在 index.html 中引入 icomoon 的 css 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/icomoon@3.0.0/icomoon.min.css" />
<!-- 在组件中使用 -->
<template>
  <div>
    <i class="icon-heart"></i>
  </div>
</template>
<script>
export default {
  mounted() {
    // 添加 icon-heart 这个 class 名称到 i 标签上
    const heartIcon = document.querySelector('.icon-heart')
    heartIcon.classList.add('icon', 'icon-heart')
  }
}
</script>