Nuxt.jsのプロジェクトにFont Awesomeを導入します。
基本設定
パッケージを追加
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にします
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>
使えるアイコンを調べる
使えるアイコンを調べるのは公式のアイコン一覧画面で Free と Solid にチェック入れます。
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対策的に良くありません。
そのため、必要なフォントのみを読み込む方法を以下の記事に書きました！
