はじめに

Vue.js で FontAwesome を使う方法について整理した。

TL;DR

  • npm で FontAwesome 関連のパッケージをインストール
  • new Vue する前にライブラリのインポートと使用するアイコンの設定
  • <font-awesome-icon :icon="[]" /> タグで表示

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. インストール
    2. 使用方法
      1. 基本的な流れ
      2. Solid, Regular, Brands を使う
      3. 複数のアイコンを使う
      4. 全てのアイコンを使う
      5. スタイル調整
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15
BuildVersion: 19A583

$ node -v
v12.7.0

$ npm -v
6.10.3

$ npm v vue
vue@2.6.10 | MIT | deps: none | versions: 250

$ npm ls | grep @fortawesome
@fortawesome/fontawesome-svg-core@1.2.25
@fortawesome/fontawesome-common-types@0.2.25
@fortawesome/free-brands-svg-icons@5.11.2
@fortawesome/free-regular-svg-icons@5.11.2
@fortawesome/free-solid-svg-icons@5.11.2
@fortawesome/vue-fontawesome@0.1.7

詳細

Vue.js | Font Awesome に「公式コンポーネントがあるよ」とあるので、@fortawesome/vue-fontawesome を使えば OK。

Font Awesome now has an official Vue.js component that’s available for all who want to use our icons in their Vue.js projects.

インストール

Free 版を使うなら以下をインストール。

1
2
3
4
5
$ npm i @fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/free-brands-svg-icons \
@fortawesome/free-regular-svg-icons \
@fortawesome/vue-fontawesome

Pro 版も使うなら以下も一緒にインストールし、Installing the Pro version of Font Awesome の内容に従ってセットアップすれば良いと思われる。

1
2
3
4
$ npm i @fortawesome/pro-solid-svg-icons \
@fortawesome/pro-regular-svg-icons \
@fortawesome/pro-light-svg-icons \
@fortawesome/pro-duotone-svg-icons

使用方法

基本的な流れ

new Vue の前に import やら設定を行う。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core';
// ↓は使いたいアイコン
// bookmark(https://fontawesome.com/icons/bookmark?style=solid) を使いたい場合は faBookmark
import { faBookmark } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

// FontAwesome Setup
library.add(faBookmark);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.config.productionTip = false;

new Vue({
render: h => h(App),
}).$mount("#app");

あとは xxxx.vue 内で <font-awesome-icon :icon="[]" /> で表示できる。↑ で、Solid の bookmark アイコン を読み込んでいるので、:icon="['fas', 'bookmark']" を使う。

1
2
3
4
5
<template>
<div id="app">
<font-awesome-icon :icon="['fas', 'bookmark']" />
</div>
</template>

Solid, Regular, Brands を使う

import するライブラリを変更することで Solid, Regular, Brands を使い分けることができる。

Solid

Heart Icon | Font Awesome

1
2
3
4
5
...
import { faHeart } from '@fortawesome/free-solid-svg-icons';
...
library.add(faHeart);
...
1
2
<!-- Solid は fas -->
<font-awesome-icon :icon="['fas', 'heart']" />
Regular

Heart Icon - Regular | Font Awesome

1
2
3
4
5
...
import { faHeart } from '@fortawesome/free-regular-svg-icons';
...
library.add(faHeart);
...
1
2
<!-- Regular は far -->
<font-awesome-icon :icon="['far', 'heart']" />
Brands

Apple Icon - Brands | Font Awesome

1
2
3
4
5
...
import { faApple } from '@fortawesome/free-brands-svg-icons';
...
library.add(faApple);
...
1
2
<!-- Brands は fab -->
<font-awesome-icon :icon="['fab', 'apple']" />

複数のアイコンを使う

importlibrary.add 時にカンマ区切りで使いたいアイコンを指定する。

1
2
3
4
5
...
import { faBookmark, faHeart } from '@fortawesome/free-solid-svg-icons';
...
library.add(faBookmark, faHeart);
...

全てのアイコンを使う

いちいち使いたいアイコンを探して追加して〜が面倒な場合は、fas, far, fab でアイコン全体を import できる。

1
2
3
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

※当然、サイズが大きくなるので注意が必要。1〜2,3 アイコンしか使わないのであれば、個別に import した方が軽量になる。(開発初期は全体ロードしておいて、使うアイコンが決まったら個別ロードに修正する、というのが良さそう)

スタイル調整

<i class="fas fa-camera fa-2x"></i> などでサイズ変更ができる機能は、@fortawesome/vue-fontawesome でも利用可能。

Features から良く使いそうなものをいくつか抜粋。

サイズ変更

size 属性を指定する。xs, sm, lg, 2x, 3x, … が利用可能。

1
2
3
<font-awesome-icon :icon="['fas', 'heart']" size="xs" />
<font-awesome-icon :icon="['fas', 'heart']" size="lg" />
<font-awesome-icon :icon="['fas', 'heart']" size="3x" />

回転

rotation 属性で回転する角度(時計回り)を指定。

1
2
3
<font-awesome-icon :icon="['far', 'heart']" rotation="90" />
<font-awesome-icon :icon="['far', 'heart']" rotation="180" />
<font-awesome-icon :icon="['far', 'heart']" rotation="270" />

flip 属性で点対称の回転も設定可能。

1
2
3
4
<font-awesome-icon :icon="['fab', 'apple']" />
<font-awesome-icon :icon="['fab', 'apple']" flip="horizontal" />
<font-awesome-icon :icon="['fab', 'apple']" flip="vertical" />
<font-awesome-icon :icon="['fab', 'apple']" flip="both" />

アニメーション

spinners カテゴリのアイコンアニメーション設定ができる。

spin 属性や、pulse 属性を指定する。

1
2
3
4
<font-awesome-icon :icon="['fas', 'cog']" />
<font-awesome-icon :icon="['fas', 'cog']" spin />
<font-awesome-icon :icon="['fas', 'cog']" pulse />
<font-awesome-icon :icon="['fas', 'cog']" spin pulse />

枠線

border 属性を指定。

1
2
<font-awesome-icon :icon="['far', 'heart']" />
<font-awesome-icon :icon="['far', 'heart']" border />

マスキング(アイコンを重ねる その1)

mask 属性に重ねるアイコンを指定。

1
2
<font-awesome-icon :icon="['fab', 'airbnb']" />
<font-awesome-icon :icon="['fab', 'airbnb']" :mask="['fas', 'square-full']" />

レイヤリング(アイコンを重ねる その2)

事前設定が必要。

1
2
3
4
5
6
...
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
...
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('font-awesome-layers', FontAwesomeLayers);
...

<font-awesome-layers /> で囲む。<font-awesome-layers />size 属性が指定できるか試したけど、class="fa-xx" じゃないと効かなかった。

1
2
3
4
5
6
7
8
<font-awesome-layers class="fa-lg">
<font-awesome-icon :icon="['fas', 'circle']" />
<font-awesome-icon :icon="['fas', 'check']" transform="shrink-6" :style="{ color: 'white' }" />
</font-awesome-layers>
<font-awesome-layers class="fa-lg">
<font-awesome-icon :icon="['fas', 'circle']" />
<font-awesome-icon :icon="['fas', 'check']" size="xs" :style="{ color: 'white' }" />
</font-awesome-layers>

アイコンに文字を重ねる

事前設定が必要。

1
2
3
4
5
6
7
...
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome';
...
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('font-awesome-layers', FontAwesomeLayers);
Vue.component('font-awesome-layers-text', FontAwesomeLayersText);
...

<font-awesome-layers /> で囲んで、<font-awesome-layers-text /> を使う。

1
2
3
4
<font-awesome-layers full-width class="fa-4x">
<font-awesome-icon :icon="['fas', 'chess-queen']" />
<font-awesome-layers-text transform="down-2 shrink-8" value="Q" :style="{ color: 'white' }" />
</font-awesome-layers>

まとめ

  • npm で FontAwesome 関連のパッケージをインストール
  • new Vue する前にライブラリのインポートと使用するアイコンの設定
  • <font-awesome-icon :icon="[]" /> タグで表示

参考文献

関連記事