Nuxt.jsにFont Awesomeを追加する方法

今回は、Nuxt.jsにFont Awesomeを追加する方法を紹介します。

Font Awesomeを使用すると、手軽におしゃれなアイコンを使うことができます。

Nuxt.jsにFont Awesomeをインストールする

Nuxt.jsのプロジェクトにFont Awesomeをインストールします。

使用するアイコンとして、SolidアイコンBrandアイコンをインストールします。

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

Font Awesomeには、SolidアイコンやBrandアイコンの他にもRegularアイコンなどがあります。

また、Font Awesome Proは年間$99で使用することができます。

興味がある方は見てみるのも良いでしょう。

nuxt.config.jsの設定

nuxt.config.jsにFont Awesomeの設定を書いていきます。

{
  modules: [
    'nuxt-fontawesome', // <= 追記
  ],

  fontawesome: {
    component: "fa",
    imports: [
      {
        set: "@fortawesome/free-solid-svg-icons", // Solidアイコン
        icons: ["faHome", "faCaretRight"],
      },
      {
        set: "@fortawesome/free-brands-svg-icons", // Brandアイコン
        icons: ["faTwitter"],
      },
    ],
  },
}

上記のように設定すると、Solidアイコンからhomeアイコンとcaret-rightアイコンが、brandアイコンからTwitterアイコンが使えるようになります。

Font Awesomeはケバブケースで表示されているのですが、Nuxt.jsにインポートする時はキャメルケースを使用します。

VueファイルでFont Awesomeを使う

nuxt.config.jsを設定すると、各VueファイルでFont Awesomeを使用できるようになります。

Solidアイコンの場合

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

Brandアイコンの場合

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

上記のようなHTMLタグを書くと、アイコンが表示されます。

注意点としては、

  • Solidアイコンはfas、Brandアイコンはfabと書くこと
  • アイコン名をケバブケースで書くこと

です。

以上、Font Awesomeの使い方をまとめてきました。

Font Awesome以外のもたくさん可愛いアイコンがあるので、ネット上で調べてみましょう。