在用vue-cli4创建的vue2.x项目中通过vue-fontawesome使用fontawesome5

前言

  本文写于2020年1月11日，仅提供最基本的引用方法，参考fontawesome5英文官方文档和vue-fontawesome英文官方文档。

正文

  在vue项目中使用fontawesome5图标，不需要引入fontawesome组件，直接引入vue-fontawesome和相关组件就可以了。

第1步：npm install

  在vue项目目录中执行下面的安装命令：

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

  其中：

@fortawesome/free-solid-svg-icons是solid风格图标

@fortawesome/free-regular-svg-ico是regular风格图标

@fortawesome/free-brands-svg-icons是品牌图标

  这三个可以根据项目实际需要选择性安装，当然如果有专业版授权，也可以引入诸如@fortawesome/pro-duotone-svg-icons等专业版图标。

第2步：import

  在项目代码中适当的位置使用以下方式将组件引入到页面中，vue-fontawesome官方推荐在main.js中引入（本文作者本人为了方便而在main.js同级创建了fontawesome.js文件，然后在main.js中引入fontawesome.js）：

import Vue from 'vue'

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'

import {
  FontAwesomeIcon,
  FontAwesomeLayers,
  FontAwesomeLayersText
} from '@fortawesome/vue-fontawesome'

// library.add与import对应
library.add(fas)
// library.add(far)
// library.add(fab)

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

第3步：use，礼成

  在vue组件或html文件中需要使用图标的位置使用下面的方式将图标插入到文档中（不要使用这样的方式，在vue中行不通也不建议这样用）：

<font-awesome-icon icon="spinner" />

<font-awesome-icon :icon="['fas', 'angle-double-left']" />

<font-awesome-icon :icon="['fas', 'angle-double-right']" fixed-width />

<font-awesome-icon icon="spinner" size="xs" />
<font-awesome-icon icon="spinner" size="lg" />
<font-awesome-icon icon="spinner" size="6x" />

<font-awesome-icon icon="spinner" rotation="270" />

<font-awesome-icon icon="spinner" flip="horizontal" />
<font-awesome-icon icon="spinner" flip="vertical" />
<font-awesome-icon icon="spinner" flip="both" />

<font-awesome-icon icon="spinner" spin />
<font-awesome-icon icon="spinner" pulse />

后记

  事实上，vue-fontawesome的开发者不建议我们简单粗暴的一次性把整个图标库引入到项目中，这样做违背vue框架组件化开发和按需引入的原则，下面是文档原文：

This(Import entire styles) will add the entire brands style to your library. Be careful with this approach as it may be convenient in the beginning but your bundle size will be large. We highly recommend that you take advantage of subsetting through tree shaking.

  大概意思就是说这种引入方式虽然用起来会很方便，但是会在发布时让包体积很大，所以官方推荐采用组件化引用的方式。具体使用方法如下：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner, faAlignLeft } from '@fortawesome/free-solid-svg-icons'

library.add(faSpinner, faAlignLeft)

  对应的vue文件或html文件写法：

<font-awesome-icon :icon="['fas', 'spinner']" />
<font-awesome-icon :icon="['fas', 'align-left']" />

  注意到了吧，其实就是“用一个图标便引入一个图标”。

  好了，参考本文方法可以实现在vue前端项目中自由使用fontawesome5中的免费版本图标，在官方文档中可以获得更多有用的信息。

fontawesome5官方文档（vue.js）：https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

vue-fontawesome官方文档：https://www.npmjs.com/package/@fortawesome/vue-fontawesome

 

  希望本文可以帮助到你，也欢迎你随时与我交流探讨，我们共同进步。