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でi
をsvg
に置き換えるようにします。
FontAwesomeのアイコンの埋め込み方
アイコンの埋め込み方は、2通りあります。
v-icon
を使用する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-
を除く必要があります。