LoginSignup
12
9

More than 5 years have passed since last update.

nuxt-fontawesomeのCould not find one or more icon...エラーの解決方法

Last updated at Posted at 2019-04-15

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>



↓こんな感じで無事に表示されました。よかったよかった!
スクリーンショット 2019-04-15 22.59.28.png

検索してもドンピシャの記事が出てこなかったので、Qiitaに書きました。
Nuxt.jsとVue.jsを最近趣味でいじっているので、また共有できればと思います。
それでは!

12
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
9