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

 

  但願本文能夠幫助到你，也歡迎你隨時與我交流探討，咱們共同進步。