Nuxtでfontawesomeの必要なアイコンを使う

必要なパッケージをインストールします。

yarn add nuxt-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons

nuxt.config.js に nuxt-fontawesome の設定を記述

modules: ['nuxt-fontawesome'],
 fontawesome: {
   component: "fa",
   imports: [{
       set: '@fortawesome/free-brands-svg-icons',
       icons: ['faTwitter', 'faFacebookSquare', 'faInstagram']
     },
     {
       set: '@fortawesome/free-solid-svg-icons',
       icons: ['faUtensils', 'faCheckSquare']
     }
   ]
 },

各vueファイルで、

<fa :icon="['fab', 'twitter']" />
<fa :icon="['fas', 'home']" />​

などと指定してあげる

ここが参考になりました。ありがとうございました。


この記事が気に入ったらサポートをしてみませんか?