Vue.jsでfontawesomeを使ってみる
ちょっと詰まったのでメモ
必要なライブラリは以下
- @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とか、結構いじれるパラメータがあるっぽい。