【Nuxt.js】Nuxt.jsにFont Awesomeを導入する【nuxt-fontawesome】

f:id:duo-taro100:20160218004611p:plain

今回はNuxt.jsにFont Awesomeを導入する方法を解説していきます。
導入方法は2通りです。

nuxt.jsのnuxt.config.jsでfontawesomeのcssを読み込む

nuxt-fontawesomeを使う

私は前者を利用しています。

nuxt.jsのnuxt.config.jsでfontawesomeのcssを読み込む

nuxt.config.jsにcss読み込みを追記します。

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    // 省略
    link: [
      { rel: "stylesheet", href:"https://use.fontawesome.com/releases/v5.6.1/css/all.css"}
    ]
  },

これでオッケーです。
あとは、無料で使用できるアイコンを以下のページから探し出します。

fontawesome.com

例えば、家マークを使いたい場合は検索窓に「home」と入力して検索します。

f:id:duo-taro100:20190122114028p:plain — fontawesomeの検索

使いたいアイコンを選択すると、アイコンの詳細ページに飛ぶので、上部にあるタグ部分をクリックします。

するとタグがコピーされますので、それを貼り付けるだけです。

<i class="fas fa-home"></i>

1つ目の方法に関してはこれで完了です。

nuxt-fontawesomeを使う

続いてnuxt-fontawesomeを使った方法解説します。

www.npmjs.com

上記ページのREADME通りに進めればできます。

依存関係の追加

npmを使用してプロジェクトに依存関係を追加します。

$ npm i nuxt-fontawesome

ビルドできない場合

WebPackのビルドが失敗した場合には、明示的にfontawesomeをインストールする必要がある可能性があります。
ビルドが問題なければ不要です。

$ npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

nuxt.config.jsへの追記

modulesにnuxt-fontawesomeを追記します。

module.exports = {
 modules: [
     // 追記
    'nuxt-fontawesome'
  ]
}

次の項目で他にも追記します。

依存関係の追加2

$ npm i @fortawesome/free-solid-svg-icons

nuxt.config.jsへの追記2

こちらもnuxt.config.jsに追加します。

module.exports = {
 modules: [
     // 先ほど追記した箇所
    'nuxt-fontawesome'
 ]
 // 新たに追記 
 {
  fontawesome: {
    imports: [
        {
          set: '@fortawesome/pro-regular-svg-icons',
          icons: ['faAdjust']
        },
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
    ],
 },
}