宮崎在住エンジニアのジョウ(@JotarO_Oyanagi) です。
Font Awesome の ver.5 が出たということで、Vue で使いたいと思い公式をみたところ「コンポーネントとして使う」という内容が目に...。
いやいや普通にクラス指定で使いたいと思ったので、以下の方法で import しました。
TL;DR
- Font Awesome 5 をシングルファイルコンポーネント内で使う
- npm でインストールした css ファイルを import（web font として使用）
- メインとなる js ファイルで読み込んでおけば、vue ファイルごとに読み込まなくてOK
実装してみる
まずは Font Awesome（free 版） をインストールします。
npm install --save @fortawesome/fontawesome-free-webfonts
次に、インストールしたファイルをメインとなる js ファイルから import します。
main.js
import Vue from 'vue'
// Font Awesome のメインファイルを import
import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css'
// 使用するカテゴリーのファイルを import
import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css'
import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css'
import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css'
new Vue({
el: '#App',
...
あとはそのプロジェクトで使用する .vue ファイル内で、従来のクラス指定の方法で Font Awesome が使えます。
component.vue
<template>
<div>
<i class="fab fa-accessible-icon"/>
</div>
</template>
一点注意としましては、対応するのアイコンのカテゴリー用クラスも一緒に付ける必要があります。
（上記の例では fab）
カテゴリーは現時点で以下の4種類のようです。
対応するクラスを併記します。
-
Solid :
fas -
Regular :
far -
Light :
fal -
Brands :
fab
Light は free 版にはないようなので、free 版なら３種のカテゴリーを使用できます。
おわりに
free 版でも900以上のアイコンが使える Font Awesome 5。
SVG でも使えるので、 とても重宝しています。
参考資料
- JS Component Packages | How to Use | Font Awesome 5
- icons (free) | Font Awesome 5