在用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文件中需要使用图标的位置使用下面的方式将图标插入到文档中（不要使用<i class=”fas fa-home”></i>这样的方式，在vue中行不通也不建议这样用）：

<!--
icon属性设置动态绑定（不带冒号）时，属性值就是图标名称，默认使用fas库
-->
<font-awesome-icon icon="spinner" />
<!--
icon属性设置动态绑定（带冒号）时，属性值为数组，
数组第2个元素是图标库，如fas、far、fab等
数组第2个元素是图标名称
-->
<font-awesome-icon :icon="['fas', 'angle-double-left']" />
<!--
fixed-width属性用于让图标统一宽度
-->
<font-awesome-icon :icon="['fas', 'angle-double-right']" fixed-width />
<!--
通过size属性设置图标大小
-->
<font-awesome-icon icon="spinner" size="xs" />
<font-awesome-icon icon="spinner" size="lg" />
<font-awesome-icon icon="spinner" size="6x" />
<!--
通过rotation属性控制图标的呈现角度
-->
<font-awesome-icon icon="spinner" rotation="270" />
<!--
通过flip属性控制控制图标翻转
-->
<font-awesome-icon icon="spinner" flip="horizontal" />
<font-awesome-icon icon="spinner" flip="vertical" />
<font-awesome-icon icon="spinner" flip="both" />
<!--
通过spin和pulse属性让图标旋转、跳动
-->
<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

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