シングルファイルコンポーネント内で Font Awesome をクラス指定で使う

宮崎在住エンジニアのジョウ(@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 版なら３種のカテゴリーを使用できます。

参考：Font Awesome アイコン一覧

おわりに

free 版でも900以上のアイコンが使える Font Awesome 5。
SVG でも使えるので、 とても重宝しています。

参考資料

• JS Component Packages | How to Use | Font Awesome 5
  • https://fontawesome.com/how-to-use/js-component-packages
• icons (free) | Font Awesome 5
  • https://fontawesome.com/icons?d=gallery&m=free