[Nuxt]FontAwesomeで使いたいアイコンだけを使おう[Vue]

今まで、Nuxtでサービスを作っていて、アイコンにFontAwesomeをCDNで利用していたのですが、これが非常にパフォーマンスに悪いことに気づきました。少なくない影響を与えているのでどうしようかなと思っていたところ、使うアイコンだけを登録しておけば速くなるという情報を耳にしました。

実際にやってみたところ、かなりの速度改善ができましたので共有します。

インストール

FontAwesome公式にあるようにいくつかのパッケージをnpmでインストールしておきます。

$ npm install --save @fortawesome/fontawesome-svg-core
$ npm install --save @fortawesome/free-brands-svg-icons
$ npm install --save @fortawesome/free-solid-svg-icons
$ npm install --save @fortawesome/vue-fontawesome

僕はfabアイコンも利用するのでbrands-svgもインストールしています。

それでは、plugins/font-awesome.jsに記述しておきます。

import Vue from 'vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faInstagram, faLine } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faPlus)
library.add(faTwitter, faInstagram, faLine)

Vue.component('fa-icon', FontAwesomeIcon)

Vue.config.productionTip = false

fasからはプラスボタン、fabからはTwitterやInstagramのアイコンを使います。

そして、nuxt.config.jsに書いて、グローバルに使えるように!

css: [
  '@fortawesome/fontawesome-svg-core/styles.css'
],
plugins: [
  { src: '~plugins/font-awesome', ssr: false }
],

使ってみよう

<template/>に書いていきましょう。

<fa-icon icon="plus" size="3x"/>

これでfas系のアイコンは使えます。サイズも指定できるのが良き良き。

しかし、fab系はこれではダメです。

<fa-icon :icon="['fab', 'twitter']" size="lg" :style="{ color: 'black' }"/>

このようにして、:iconfabを指定してあげなければいけません。何も指定していないとfasだと思われるぽい。

また、色などはこのようにして設定してあげられます。

まとめ

いるアイコンだけ使えば速くなるので是非是非FontAwesomeをVue/Nuxtのプロジェクトに入れちゃってください。