vue2 项目引入Fontawesome

官网: https://fontawesome.com/

1.安装
`` `powershell
npm i --save @fortawesome/fontawesome-svg-core


Using Vue 2.x
```powershell
$ npm i --save @fortawesome/vue-fontawesome@latest

Using Vue 3.x

npm i --save @fortawesome/vue-fontawesome@prerelease
  1. 安装 svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-solid-svg-icons
  1. 引入icon
import { library } from '@fortawesome/fontawesome-svg-core'
// 引入所有图标
import * as faIcons from '@fortawesome/free-solid-svg-icons'
// 引入FontAwesomeIcon组件
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Vue.component('font-awesome-icon', FontAwesomeIcon)
let iconMap = new Map()
// 这里由于图标有重复的,直接全部引入会报错
for (let [key, value] of Object.entries(faIcons)) {
    if (!iconMap.get(value.iconName))
        library.add(value)
    iconMap.set(value.iconName, value)
}
  1. 使用
<template>
  <div id="app">
    <font-awesome-icon icon="user-secret" />
  </div>
</template>

原文链接: https://www.cnblogs.com/guangzan/p/14693444.html

posted @ 2023-01-11 13:50  ~LemonWater  阅读(686)  评论(0编辑  收藏  举报