十月 14, 2018 | 前端與Vue

【Nuxt教學】實作引用 Fontawesome 5 到Nuxt專案

圖示給予了使用者相對應的記憶方式，還能將訊息精簡更為網站帶來更多美觀的設計。而Fontawesome 是很常使用到的 icon library，隨時替換適合圖示、顏色以及大小，靈活度會比使用「圖片」來得高出許多。那既然使用了 Nuxt.js 來開發網站，那我們就來看看在 Nuxt 中如何安裝 Fontawesome 5 吧！

安裝 nuxt-fontawesome

首先，安裝 nuxt-fontawesome 套件。另外，Fontawesome 5 免費版有三種 package 可以安裝，可以依照需求安裝。

npm i nuxt-fontawesome
// 免費 package
npm i @fortawesome/free-solid-svg-icons // fas
npm i @fortawesome/free-regular-svg-icons // far
npm i @fortawesome/free-brands-svg-icons // fab

＊fontawesome 5 官方有提供 Vue 的安裝套件 vue-fontawesome ，nuxt-fontawesome是參考官方 vue-fontawesome，有其它的寫法問題也可以參考其文件。

nuxt-fontawesome 設定

再來，需要設定幾個部分才能使用。

1. 建立 Plugin文件說到，Plugin的建立方式參考 vue-fontawesome 的寫法，建立一個 font-awesome.js 在 plugin 中。基本上，寫法可以濃縮至下列，其餘三種 free package 就在 nuxt.config.js 中設定。

import Vue from 'vue'
// the component
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// icon 要使用的標籤名稱 
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false

2. nuxt.config.js接下來，先引入plugin，再寫入三種 free package。依照文件的寫法，可以把引入的寫法跟 modules 寫在一起，不過當 modules 越來越多，還是分開寫會比較好。因此，底下我們將兩者分開，設定 icon component 的簡稱為fa，再來引入 package(自行選擇要引入 package 的全部圖示，還是單一圖示)。

{
  plugins: [{
    src: '~/plugins/font-awesome'
  }],
  modules: [
    'nuxt-fontawesome',
  ],
  fontawesome: {
      // icon 的標籤使用 ，這邊不設定就會依照 plugin 裡的設定
      component: 'fa', 
      imports: [
        // 引入 fas 所有的icon
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
        // 只引入兩種特定的icon
        // 此為pro付費版的package，請注意
        {
          set: '@fortawesome/pro-regular-svg-icons',
          icons: ['faAdjust', 'faArchive']
        }
      ]
  }
}

<br>