Nuxtでfontawesomeを使用する方法

nuxt-fontawesomeを使って実装していきます。

まずは、必要なパッケージをインストール

npm i -D nuxt-fontawesome @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons

インストールができたら、公式ドキュメントを元にnuxt.config.jsにnuxt-fontawesomeの設定を記述していきます。

module.exports = {
  //省略
modules: [
    'nuxt-fontawesome'
  ],
  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['fab']
      }
    ]
  }
}

これでvueテンプレート内でフォントアイコンを使用することができます。

<template>
  <div>
    <font-awesome-icon :icon="['fab','twitter']" />
    <font-awesome-icon :icon="['fab','github']" />
  </div>
</template>

しかし、このままだと全てのアイコンがバンドルされるためサイズが非常に大きくなってしまいます。(175.48KB)

なので、使用するアイコンのみをバンドルするように変更します。

必要なアイコンのみを指定

今回はtwitterとGithubのアイコンを使用したいので、以下のように使用したいアイコンのみ指定します。

module.exports = {
  //省略
modules: [
    'nuxt-fontawesome'
  ],
  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['faTwitter', 'faGithub']
      }
    ]
  }
}

@fortawesome/free-brands-svg-iconsのサイズが175.48KB→1.12KBになり、サイズを大幅に減らすことができました！