在用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

  希望本文可以幫助到你，也歡迎你隨時與我交流探討，我們共同進步。