Nuxt.jsでfont-awesome 5のアイコンを使用するときは、nuxt-fontawesomeというプラグインを使うらしい。
しかし、普通にページ通り操作し、GitHubやFacebook,Twitterなんかのアイコンを使用すると
Could not find one or more icon...
こんなエラーメッセージが表示されて、アイコンが表示されない。
解決法
free-brands-svg-iconsを使用する。
公式ページではfree-solid-svg-iconsが例として使用されていて、fasのプレフィックスにしか対応できない。
GitHubやFacebook,Twitterはfabプレフィックスです。
エラー文から推測できると思いますが、fasプレフィックスからアイコンを探していたのでそれは見つかりませんね。
fabプレフィックスに対応したければ、free-brands-svg-iconsを使いましょう。
//パッケージのインストール
$ npm i @fortawesome/free-brands-svg-icons
nuxt.config.js
modules: [
'nuxt-fontawesome'
],
fontawesome: {
imports: [
{
set: '@fortawesome/free-brands-svg-icons',
icons: ['fab']
}
]
},
hoge.vue
<template>
<div>
<font-awesome-icon :icon="['fab', 'github-square']" />
<font-awesome-icon :icon="['fab', 'facebook']" />
</div>
</template>
↓こんな感じで無事に表示されました。よかったよかった！
検索してもドンピシャの記事が出てこなかったので、Qiitaに書きました。
Nuxt.jsとVue.jsを最近趣味でいじっているので、また共有できればと思います。
それでは！