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>

関連記事

  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • Vue.jsにVuexを導入する

    Vuexを導入する手順の作業メモです。Vuexを利用することにより、各コンポーネントで保持していたデータをstateにまとめられるので、ある程度規模が大きくなっても耐えられるプログラムを作成できます。...


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • Vue.js FontAwesome5を導入する

    webpackを使ったvue.jsのプロジェクトにFontAwesomeを導入します。webpackなどの環境は作成済みとします。最初に、以下のパッケージをインストールします。以下のようにインストール...


  • Vue.js 独自のfilterを実装する

    Vue.jsで独自のfilterを実装して、各コンポーネントで使用できるようにします。コンポーネント内で定義することもできますが、今回はグローバルファンクションとして作成して、全てのコンポーネントで使...


  • Vuex actionでの非同期処理をasync/awaitの実装をする

    Vuexのactionではajaxなどの非同期処理を実装しますが、非同期処理をasync,awaitで実装する方法を紹介します。特別な制御はいりません。ファンクションを定義する箇所にasyncを追加し...


  • Vue.js フォルダ内のコンポーネントをまとめてグローバルコンポーネントに登録する

    特定のフォルダ内にあるシングルファイルコンポーネントを、他のコンポーネントからもグローバルに参照できるように設定します。webpackを使用している前提とします。sharedフォルダにあるコンポーネン...


  • Vue.js axiosをajaxライブラリとして導入する

    Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。axiosの設定用にhttp.jsというファイルを作成します。エントリポイントのapp...


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...