Vue.js FontAwesome5を導入する
webpackを使ったvue.jsのプロジェクトにFontAwesomeを導入します。
webpackなどの環境は作成済みとします。
パッケージのインストール
最初に、以下のパッケージをインストールします。
- @fortawesome/fontawesome-svg-core
fontawesomeのコアモジュール- @fortawesome/vue-fontawesome
fontawesomeをvue.jsで使用する- @fortawesome/free-solid-svg-icons
- アイコンセット（使用しない場合は不要）
- @fortawesome/free-regular-svg-icons
- アイコンセット（使用しない場合は不要）
- @fortawesome/free-brands-svg-icons
- アイコンセット（使用しない場合は不要）
$ npm install @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons導入
以下のようにインストールしたパッケージを読み込み、Vueコンポーネントとして登録します。
以下の例ではv-faをFontAwesomeアイコンのコンポーネントとして登録しています。
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
// アイコンを読み込み
library.add(fas, far, fab);
// Vueコンポーネントを作成
Vue.component('v-fa', FontAwesomeIcon);使い方
以下のようにvueコンポーネント内で使用できます。
spinやrotationなど様々なプロパティが用意されています。詳しい設定は公式ページをご確認ください。
参考URL：vue-fontawesome
xxx.vue<template>
<v-fa icon="plus" /> <!--solid icon-->
<v-fa :icon="['far', 'edit']" /> <!--regular icon-->
<v-fa icon="plus" size="xs" /> <!--sizeを指定-->
</template>