Vue.jsでFontAwesomeを使う

普通にFontawesomeを読み込んで使っても大丈夫と思うんですが、
あえてvue.js専用にラップしてある物の使い方（備忘録）です。

インストール

$ npm install --save @fortawesome/fontawesome-svg-core
$ npm install --save @fortawesome/free-solid-svg-icons
$ npm install --save @fortawesome/free-brands-svg-icons
$ npm install --save vue-fontawsome

main.js

import Vue from 'vue'
import App from './App.vue'
//（省略）
import { library } from '@fortawesome/fontawesome-svg-core'
//基本セットを読み込んで、使いたいアイコンを読み込みます。
import { faHome , faSearch} from '@fortawesome/free-solid-svg-icons'
import { faFacebook , faLine } from '@fortawesome/free-brands-svg-icons'
//使うものはあらかじめ読み込んで「library」に追加しておきます。
library.add(faHome)
library.add(faSearch)
library.add(faFacebook)
library.add(faLine)
//さらに「vue-fontawesome」を読み込みます。
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
//カスタムタグ「font-awesome-icon」として使えるようにします。
Vue.component('font-awesome-icon', FontAwesomeIcon)

Component.vue

<template lang="pug">
.btn
  a
    font-awesome-icon(
    :icon="['fas','home']"
    )
    | Home
  a
    font-awesome-icon(
    :icon="['fas', 'search']"
    )
    | Search
  a
    font-awesome-icon(
    :icon="['fab','facebook']"
    )
    | Facebook
  a
    font-awesome-icon(
    :icon="['fab', 'line']"
    )
    | Line
</template>

これでアイコンが使えるようになります。
慣れた人ならCSSで定義したほうが速いような気がしますが、
このやり方もスッキリしていて、割と良い気がします。

参考にした記事