Help us understand the problem. What is going on with this article?

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

環境

  • 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

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

公式サイト検索

https://fontawesome.com/icons?d=gallery&m=free

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

flato-frontend__30_Jul_2020_at_16_35_.png

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

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

flato-frontend__30_Jul_2020_at_18_00_.png

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ライフを!

tu-kun
「仲間をサポートして次のステップへのキッカケを与える」を自身のミッションとしてスタートアップCTOで活動中。 技術ではAWS設計/構築、Vue.js, Nuxt.js, Python, Ruby, Javaなど幅広く携わる。 他、ペルソナ構想〜MVP検証、顧客インタビュー、そして論理的に考え現実主義のため、チーム内の意見を現実可能なラインまで落とし込むのが得意。今はXRに興味あり
from-to
ふるさと開拓サービス「flato」の開発・運用をしています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away