Nuxt.jsでfontawesomeを導入する（2020/07/31最新版）

9614 ワード
nuxt.js Build FontAwesome Build テキストリンク

環境

  • Nuxt 2.12.x
  • @nuxtjs/fontawesome 1.1.2

前提

他にも@nuxtjs/fontawesomeの導入手順の記事がありますが、nuxt.config.jsにimportsを利用した古い記述しかなかったため、改めて新しく導入の記事として残しています。（Appendix参考）

また、fontawesomeは全てのアイコンデータを読み込むと膨大なサイズのデータとなるため、利用するアイコンのみ読み込むようにしてビルドしたファイルを軽量化することが主流です。
これによって成果物のファイルサイズが軽くなるため結果として読み込み時間の短縮（パフォーマンス改善）にも繋がるのでオススメです。

※ nuxt build --analyzeコマンドでビルドしたサイズを計測可能

参考:

導入

モジュールの導入

今回はsolid/regular/brandsの3種類を指定しますが、
自身のアプリを確認しつつ省いたり足したりしてください。

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

fontawesomeファイルの準備

nuxt.config.jsにfontawesomeで利用するアイコンを直接設定できますが、
行数が長くなり読みづらくなるため、別ファイルとして用意します。

Tips

合わせて重複しないようにソート(昇順)にすることなどのルールを用いることでアイコンが設定されているかどうかが視覚的に分かりやすくなります。

公式サイト検索

build/fontawesome.js
// ここに追記するだけ
// 以下は設定例
const solid = [
  'faCaretLeft',
  'faChartLine',
  'faCheckCircle',
  'faChevronDown',
  'faChevronLeft',
  'faChevronRight',
  'faDownload',
  'faEdit',
  'faUpload',
  'faUser'
]

// ここに追記するだけ
const regular = ['faStar']

// ここに追記するだけ
const brands = ['faTwitter']

export { solid, regular, brands }

nuxt.config.jsの設定

前述で作成したfontawesome.jsファイルを読み込み、
buildModulesとfontawesome.iconsを用意するだけで簡単に導入できます。

nuxt.config.js
import * as FontAwesome from './build/fontawesome'

export default {
  buildModules: [
    ['@nuxtjs/fontawesome', { component: 'fontAwesome', suffix: true }]
  ],
  fontawesome: {
    icons: {
      solid: FontAwesome.solid,
      regular: FontAwesome.regular,
      brands: FontAwesome.brands
    }
  }
}

利用方法

@nuxt/fontawesomeモジュールはデフォルトで<fa-icon>タグが用意されています。
アイコンにアイコンを重ねることができる<fa-layers>タグも用意されてりするので詳しくは公式サイトのUsageを見ると使い方が分かると思います。

今回の場合は、nuxt.config.jsでcomponentプロパティを追加しているため、<fa-icon>ではなく<font-awesome-icon>のようにカスタマイズして利用します。
また、suffixプロパティを追加することで<font-awesome-layers>など自動的に接頭辞を変換してくれますのでこちらも詳細は公式サイトをご確認ください。

<fa-icon icon="download"/>
<fa-icon :icon="['far', 'star']"  />
<font-awesome-icon icon="download"/>
<font-awesome-icon :icon="['far', 'star']"  />

推奨しない書き方

公式でも推奨されていない書き方があります。
それはiconsプロパティでsolid: trueのように読み込みデータを個別で指定しない場合です。

solidデータを全て読み込む方法となるため、コーディングする側によってはどのデータが読み込まれているかを意識しなくて良いため開発スピードは多少上がります。

しかし、ビルドして生成された成果物を確認するとデータ量が膨大になってしまいます。
成果物のfortawesomeサイズを比較すると明確ですね！

参考(solid:trueのデータ)

  • fortawesome(圧縮前): 771.15KB
  • fortawesome(圧縮後): 247.99KB

参考(solid:個別読み込み)

  • fortawesome(圧縮前): 67.81KB
  • fortawesome(圧縮後): 23.01KB

Appendix

多くのサイトではimportsを利用する記事が多いため「importsは廃止される可能性があります」と警告が発生。
そのため、上記設定方法ではimportsを利用せずにシンプルなiconsのみを利用しています。

詳しくは公式サイトのドキュメントを確認！！！
importsの廃止についてはこちらに記載されている（公式サイトの確認は大切）
https://github.com/nuxt-community/fontawesome-module#imports-deprecated

WARN  The 'imports' option is deprecated and will be removed in a future version. Use 'icons' instead                         fontawesome

まとめ

  • 読み込むアイコンファイルは個別で読み込む
  • 公式サイトをよく読むと幸せになれる
  • 定期的に公式サイトを確認して最新の書き方にリファクタしよう！

よい、fontawesomeライフを！