Nuxt js にfont awesomeを入れるぞ！

2021-03-08

こちらを参考にyarnで入れていきます。
https://www.npmjs.com/package/@nuxtjs/fontawesome#suffix

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

nuxt.config.jsを修正

buildModulesの部分に一行追加し、更にfontawesomeという項目を作成して中身を書きます。

全てのアイコン読み込んでしまうととても重たくなってしまうので、必要なものだけ指定しましょう。
https://fontawesome.com/icons?d=gallery&p=2

上記のリンクから好きなアイコンを検索、クリックして詳細ページに「<i class=”fas fa-envelope>”」等と表示されている場合は以下のsolid: []の中にキャメルケースで記載します。
「<i class=”fab fa-twitter>”」等となっている場合は以下のbrands: []の中にキャメルケースで記載します。

buildModules: [
　　'@nuxtjs/fontawesome', // 追加
],

fontawesome: {
　　component: 'fa', // ここがvueのtemplateで呼び出すときの名前になります。
　　icons: {
      // 使うアイコンのみ以下に配列で列挙
　　　　solid: ['faEnvelope', 'faArrowRight'], // こちらは通常のアイコン
　　　　brands: ['faTwitter', 'faFacebook'] // こちらは企業のロゴ等
　　}
},

テンプレートに配置する

では実際に使っていきます。

<!-- nuxt.config.jsで solid: []に追加したアイコン -->
<fa icon="envelope" /> 
<!-- または -->
<fa icon="envelope" /> 

<!-- nuxt.config.jsで brands: []に追加したアイコン -->
<fa :icon="['fab', 'twitter']" /> <!-- brands: []に追加したアイコン -->

簡単ですね！