Font Awesome 表情库的实现 （Vue）

1.添加依赖

 1.添加SVG核心

npm i --save @fortawesome/fontawesome-svg-core

2. 添加图标包

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

3.添加Vue组件

npm i --save @fortawesome/vue-fontawesome@latest-3

2.如何使用

 1.修改main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

...
library.add(fas, far, fab)
...
app.component('font-awesome-icon', FontAwesomeIcon)
app.component('font-awesome-layers', FontAwesomeLayers)
app.component('font-awesome-layers-text', FontAwesomeLayersText)

2.按前缀和名称使用

<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { byPrefixAndName } from '@awesome.me/kit-KIT_CODE/icons'
</script>

<template>
  <FontAwesomeIcon :icon="byPrefixAndName.fas['house']" />
</template>

3.导入特定的图标

<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { byPrefixAndName } from '@awesome.me/kit-KIT_CODE/icons'
</script>

<template>
  <FontAwesomeIcon :icon="byPrefixAndName.fas['house']" />
</template>

4.找自己需要的

 

 

点击free
 

<div class="icon">
              <font-awesome-icon class="fa-lg font-awesome-icon" :icon="['fas', 'microphone']" />
  </div>

直接就可以使用

官网：Font Awesome 可以看官网文档 很详细