zukucode
主にWEB関連の情報を技術メモとして発信しています。

Vue.js FontAwesome5を導入する

webpackを使ったvue.jsのプロジェクトにFontAwesomeを導入します。

webpackなどの環境は作成済みとします。

パッケージのインストール

最初に、以下のパッケージをインストールします。

@fortawesome/fontawesome-svg-core
fontawesomeのコアモジュール
@fortawesome/vue-fontawesome
fontawesomevue.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-faFontAwesomeアイコンのコンポーネントとして登録しています。

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コンポーネント内で使用できます。

spinrotationなど様々なプロパティが用意されています。詳しい設定は公式ページをご確認ください。

参考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>

関連記事