Vue.jsでfontawesomeを使ってみる

mayatasomayataso

ちょっと詰まったのでメモ

必要なライブラリは以下

  • @fortawesome/fontawesome-svg-core
  • @fortawesome/vue-fontawesome
  • @fortawesome/free-solid-svg-icons
  • @fortawesome/free-regular-svg-icons

下2つはフォントライブラリなので、必要に応じて入れる。
まずnpmとかyarnでインストール

npm install --save @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons

main.jsに以下を記述

import { fontawesome } 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';
/** fontawesome ライブラリ読み込み */
fontawesome.add(fas, far, fab);
/** Vueのfontawesomeコンポーネント作成 */
Vue.component('v-fa', FontAwesomeIcon);

あとは作成したコンポーネントを呼び出すだけ。

<v-fa icon="arrow-alt-circle-right" />

rotateとかsizeとか、結構いじれるパラメータがあるっぽい。