開発しているWebサービスでFont Awesomeのお世話になってる。
ただ、Web Font版を使っていたので、読み込みが遅い。。

SVG版だとアイコンごとにimportできるようなので、
性能改善の一環でやってみたときの備忘録。

インストール

まずはnpmでパッケージをインストール。
使うものに応じて、追加が必要らしい。

// 必須
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save@fortawesome/free-solid-svg-icons
$ npm i --save@fortawesome/vue-fontawesome

// オプション(fabとかfarとか使うなら)
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons

pluginsの準備

Nuxtでvue-fontawesomeが使えるように、pluginを用意する。
ここで使うアイコンを個別に設定

// plugins/fontawesome.ts

import Vue from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { config, library } from "@fortawesome/fontawesome-svg-core";
import { faTwitter } from "@fortawesome/free-brands-svg-icons";
import { faPlus } from "@fortawesome/free-solid-svg-icons";

// CSSはnuxt.config.tsで設定するので、vue-fontawesomeでは追加しないようにする
config.autoAddCss = false;

// 必要なアイコンをlibraryに追加
[
  faPlus,
  faTwitter,
].forEach(v => library.add(v));

// グローバルコンポーネントとして登録
Vue.component("fa", FontAwesomeIcon);

nuxt.config.tsの設定

cssと用意したプラグインを追加する

// nuxt.config.ts
import NuxtConfiguration from "@nuxt/config";

const config: NuxtConfiguration = {
  mode: "spa",

  css: [
    // CSSを追加
    "@fortawesome/fontawesome-svg-core/styles.css",
  ],

  plugins: [
    // プラグインを追加
    { src: "~/plugins/fontawesome", ssr: false },
  ],
};

設定はこれでOK

使い方

使うときはこんな感じ。
plugins/fontawesome.tsで設定したfaを使う感じ。

<!-- xxx.vue -->
<template>
  <div>
    <!-- fas fa-plusの場合: デフォルトがfas -->
    <fa icon="plus" aria-hidden="true" />

    <!-- fab fa-twitterの場合 -->
    <fa :icon="['fab', 'twitter']" aria-hidden="true" />
  </div>
</template>

以上!!
シンプルで簡単(´ω｀)

ハマった...

Bulmaと一緒に使うと、うまくいかない？

Bulmaを使ってるけど、一緒に使うとうまくいかない。。
ちょっとだけ上にずれた感じなる。。

<span class="icon is-small has-text-twitter">
  <fa :icon="['fab', 'twitter']" aria-hidden="true" />
</span>

だと、 Font Awesomeの.svg-inline--fa(GitHub)＋.svg-inline--fa.fa-w-16(GitHub)で想定しているheightと
Bulmaの.icon(GitHub)とが異なり、ズレが起こるよう。。

なので、Font Awesomeに合わせる形で、すこし変更する。

.icon svg {
  width: 1em;
  height: 1em;
}

また、それでもズレが起こる場合は、個別にvertical-alignを設定して調整。

.icon {
  vertical-align: -0.1em;
}

もう少し良いやり方もありそうだけど、とりあえずこれで対処。。
なお、Buefyだとうまくやってくれないみたいなので、<b-icon>とかは使えない。。

以上!!

こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

• ［Nuxt］FontAwesomeで使いたいアイコンだけを使おう［Vue］ - The YouJ Times
• FortAwesome/vue-fontawesome: Font Awesome 5 Vue component
• Font-Awesome v5+ · Issue #554 · buefy/buefy