Nuxt.jsにFont Awesomeを導入する

2020.10.12
2020.11.29
Nuxt.jsにFont Awesomeを導入する

Nuxt.jsのプロジェクトにFont Awesomeを導入します。

検証した環境

1 nuxt 2.14.3
2 webpack 4.44.1 @nuxt/webpack の中に同梱されているもの
3 nuxt-fontawesome 0.4.0 導入後

基本設定

パッケージを追加

Nuxt用のFont Awesomeのパッケージがあるのでそちらを追加

$ yarn add nuxt-fontawesome
・・・
info All dependencies
├─ @fortawesome/fontawesome-common-types@0.2.32
├─ @fortawesome/fontawesome-svg-core@1.2.32
├─ @fortawesome/vue-fontawesome@0.1.10
└─ nuxt-fontawesome@0.4.0
✨  Done in 5.14s.

公式を見ると

Also it may be needed to explicitly install fontawesome, if your webpack build fails
(また、webpackのビルドが失敗した場合は、fontawesomeを明示的にインストールする必要があるかもしれません。- google翻訳)


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

vaso2/nuxt-fontawesome: Nuxt module for Fontawesome 5 integration with ES6 imports and tree shakingより引用

と書かれているのでこの時点でビルドが通らなくなった人は ↑ を行うと良さそうです。
私は上記を実行せずに問題なかったので実行してません。

nuxt.config.jsに設定する

nuxt-fontawesomeの設定をnuxt.config.jsにします

nuxt.config.js
export default {
  modules: ['nuxt-fontawesome'],
  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas'],
      },
    ],
  },
  ・・・
}

Font Awesomeを使う

コンポーネント内で表示する

使い方は簡単、あとは公式に書かれているように <template> 内で読み込むだけ。
importも不要です

<template>
  <div>
    <font-awesome-icon icon="dollar-sign" style="font-size: 30px" />
    <font-awesome-icon icon="cog" />
  </div>
</template>


使えるアイコンを調べる

使えるアイコンを調べるのは公式のアイコン一覧画面で FreeSolid にチェック入れます。
Solid Icons | Font Awesome



ここで表示されるアイコンの下の文字列(ex: address-book)を icon=<アイコン名> と指定する事で使えます。

<font-awesome-icon icon="address-book" />



もちろんWebFontとしてのCSSをあてる事も出来ます

<template>
  <div>
    <font-awesome-icon icon="dog" class="icon dog" />
    <font-awesome-icon icon="cat" class="icon cat" />
  </div>
</template>

<style>
.icon {
  font-size: 50px;
}
.dog {
  color: #fb8d00;
}
.cat {
  color: #ababab;
}
</style>

Cannot find moduleの問題

順番が前後してしまいますが、私の環境だと Cannot find module '@fortawesome/free-solid-svg-icons' というエラーが上記のコンポーネントを表示する前に起きました。



解決策はシンプルで見つからないと言われているパッケージをインストールする事で無事表示されるようになりました!

$ yarn add @fortawesome/free-solid-svg-icons

必要なフォントのみを読み込む

2020.11.29追記



上記の方法だと全てのFont Awesomeのフォントを読み込む(未使用だとしても読み込んでしまう)ため、
ファイルサイズが大きくなってしまいます。


ファイルサイズが大きくなる事でページの読み込み時間が長くなりSEO対策的に良くありません



そのため、必要なフォントのみを読み込む方法を以下の記事に書きました!

おすすめ