十月 14, 2018 | 前端與Vue

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

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

圖示給予了使用者相對應的記憶方式,還能將訊息精簡更為網站帶來更多美觀的設計。而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>

來使用 icon 吧~

以上設定都完成後,就可以快樂的來使用 Fontawesome 了。到 Fontawesome 網站挑一個 icon,我們只要需要知道是哪個 package 以及 icon 的名稱。

之後,到你想要放 icon 的地方寫入下行就完成了

之後,就自由選擇想放置的 icon 吧!

結語

簡單回憶一下,在 Nuxt 中使用 Fontawesome 的安裝要點:

  1. 安裝 nuxt-fontawesome 跟需要的 free package
  2. 寫(font-aweasome.js) plugin ,
  3. 然後在nuxt.config.js 裡引入 plugin、nuxt-fontawesome( modules )跟 Fontawesome 設定

網路也有很多 Fontawesome in Nuxt 的教學文章,不過因為 vue-fontawesome 了更新 package 的名稱,所以相關文章還是以官方的為主比較合適。

hashtags: