Vue.jsで何かプロジェクトを作成するとき、コンポーネントフレームワークであるVuetifyが便利なのでよく使っています。 アイコンにはFontAwesomeを利用することが多いです。

いつもはFontAwesomeのCSS版をCDNやnpmパッケージからインストールして使用しているのですが、今作成しているプロジェクトでSVG版を試してみました。

準備

公式ドキュメントに記載があるとおりに、npmパッケージをインストールし、Vuetifyの設定を追加します。

パッケージのインストール

FontAwesome本体と

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

公式ドキュメントで指定されているパッケージに加えて、@fortawesome/free-regular-svg-iconsを追加しています。 これは、Vuetifyが提供するコンポーネント内で使用されるアイコンに指定されているためです。もし、そのアイコンを使用しているコンポーネントを使わないのであればここでインストールする必要はありません。

Vuetifyの設定

Vuetifyを使用できるようにVue.useを使用して登録します。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)

// (1)
import { far } from '@fortawesome/free-regular-svg-icons'
library.add(far)

// (2)
Vue.component('font-awesome-icon', FontAwesomeIcon)

// (3)
dom.watch()

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'faSvg'
  },
})

公式ドキュメントで書かれている設定に加えて、3つ追加している部分があります。

上記(1)では、先に書いたように、使用するアイコンを登録しています。

(2)は、Vue上でFontAwesomeを便利に扱うためのコンポーネントを、このプロジェクト内の全Vueテンプレート内で使用できるように登録しています。 ここで重要なのは、登録しているコンポーネント名をfont-awesome-iconにしなければいけないというところです。 Vuetifyの設定でicons.iconfont = 'faSvg'としたとき、Vuetifyは内部で使用するアイコンの読み込みをfont-awesome-iconコンポーネントが使えることを前提として書かれています。

(3)は、v-iconコンポーネントを使用してFontAwesomeのアイコンを埋め込む場合に必要です。 icons.confont = 'faSvg'と設定したとき、v-iconはSVGを直接埋め込まず、iタグにクラスを指定するのみです。 そこで、fontawesome-svg-coreが提供するdom.watchを使用し、JSでisvgに置き換えるようにします。

FontAwesomeのアイコンの埋め込み方

アイコンの埋め込み方は、2通りあります。

  1. v-iconを使用する
  2. font-awesome-iconを使用する

どちらも、アイコンを埋め込むのですが動作が異なります。

v-icon を使用する

v-iconはVuetifyが提供するコンポーネントです。

<v-icon>fas fa-calendar-day</v-icon>

このとき、テキスト部分(タグで挟まれた部分)にFontAwesomeのアイコンのクラスを指定します。 上の例は、calendar-dayアイコンを埋め込む場合のタグの記述です。 これはiタグを埋め込み、Vuetifyとしてのクラスを付け加えます。 ですので、Vuetifyの他のコンポーネントとの見た目を合わせることができます。

1つ欠点があるとすれば、上で説明したとおり、プロジェクトのJSの起動するときに、dom.watchを予め呼んでおかないと正しく表示されません。

font-awesome-iconを使用する

vue-fontawesomeが提供するFontAwesomeIconコンポーネントを使用すると、その部分にSVGをそのまま埋め込むことができます。 こちらの方法だと、上のv-iconの場合に必要だったdom.watchは必要ありません。

<font-awesome-icon :icon="['fas', 'calendar-day']"></font-awesome-icon>

ここで気をつけなければいけないのは、iconプロパティを使ったアイコンの指定のしかたです。 文字列の配列を渡さなければならないことと、アイコンのクラス名とは一致しないということに気をつけなければなりません。

calendar-dayアイコンを指定する場合、v-iconではfas fa-calendar-dayであるのに対し、['fas', 'calendar-day']とアイコン名からfa-を除く必要があります。

参考