[Nuxt.js] font-awesomeをNuxtで使用する

基本的には公式ドキュメントに載っていますが、まとめます。
以下、公式HP

nuxt-fontawesome

セットアップ

Nuxtプロジェクトで以下のコマンドを実行し、インストールします。

$ npm i nuxt-fontawesome
$ npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

もしかしたら2行目のコマンドはいらないかもしれませんが、自分は行いました。

つづいてnuxt.config.jsに以下を追記します。

// nuxt.config.js

export default {
    .
    .
    .
  modules: [
   'nuxt-fontawesome', //これ追加
  ],
    .
    .
    .
// ここから下も追加
  fontawesome: {
   imports: [
     {
       set: '@fortawesome/free-solid-svg-icons',
       icons: ['fas']
     }
   ]
 },
}

使用する

使用するにはfont-awasomeタグをtemplateの中に記述します。

<template>
   <div class="font-awesome">
       <font-awesome-icon icon = "shapes" />
   </div>
</template>

あとは以下のコマンドを実行して確認するだけです！

$ npm run dev

おまけ

有料版を使用する場合はnuxt.config.jsに以下のインポートが必要となるみたいです。実際に私の方で試したわけではありません。

// nuxt.config.js

export default {
    .
    .
    .
  fontawesome: {
   imports: [
     {
       set: '@fortawesome/free-solid-svg-icons',
       icons: ['fas']
     },
// ここから
     {
       set: '@fortawesome/pro-regular-svg-icons',
       icons: ['faAdjust']
     },
// ここまで追加
   ]
 },
}

まとめ

結構簡単でした！