Nuxt.js プロジェクトに Font Awesome を導入する
投稿日:May 29, 2021 (土)Nuxt.js に Font Awesome を導入する
Nuxt.js (^2.15.3) で Font Awesome を使えるようにする方法を備忘の目的に記録します。
基本的には、Nuxt Font Awesome 5 という npm パッケージの README の説明通りに進めていきます。
まず、Font Awesome を使いたいプロジェクトで次のコマンドを実行して nuxt-fontawesome をインストールします。
npm i nuxt-fontawesome
README に "Also it may be needed to explicitly install fontawesome, if your webpack build fails" と説明があるので、必要に応じて次のコマンドも実行し、明示的に fontawesome-svg-core と vue-fontawesome もインストールします。
npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome
また、今回は GitHub や Twitter のアイコンも使用したいので、次のコマンドも実行しておきます。
npm i @fortawesome/free-brands-svg-icons
次に nuxt.config.js
または nuxt.config.ts
に次のような記述を追加します。
{
modules: [
'nuxt-fontawesome',
]
],
imports: [
{
set: '@fortawesome/free-solid-svg-icons',
icons: ['fas'],
},
{
set: '@fortawesome/free-brands-svg-icons',
icons: ['fab'],
},
],
}
imports の中の @fortawesome/free-solid-svg-icons
や @fortawesome/free-solid-svg-icons
という記述について、"fontawesome" ではなく "fortawesome" になっていますが、タイポではありません。 package.json
を見ると、下記のように対応する内容を見つけることができます(もし package.json
の中にそれらがない場合は、明示的にインストールしてください)。
{
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2"
}
}
以上で必要な設定は完了しています。
たとえばこのサイトでも用いている、ホームアイコンと GitHub, Twitter のアイコンを表示するためには、 <template>
タグの中に次のように記述すれば OK です。
<template>
<div>
<font-awesome-icon icon="home" />
<font-awesome-icon :icon="['fab', 'github']" />
<font-awesome-icon :icon="['fab', 'twitter']" />
</div>
</template>