yarnを使ってVue.jsにFontAwesomeを導入する

はじめに

yarnを使ってVue.jsにFontAwesomeを導入する方法について

導入方法

まずはyarnを使ってFontAwesomeをインストールします。

$ yarn add @fortawesome/fontawesome-svg-core

$ yarn add @fortawesome/free-solid-svg-icons

$ yarn add @fortawesome/vue-fontawesome

続いて、hello_vue.jsファイルにインストールしたものをインポートします。

import Vue from 'vue'
import App from '../app.vue'
import router from '../router'
import axios from '../plugins/axios'
import store from '../store'
import 'bootstrap/dist/css/bootstrap.css'
import '../plugins/veevalidate'

// ここから
import { library } from '@fortawesome/fontawesome-svg-core'
import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faChevronCircleUp)

Vue.component('font-awesome-icon', FontAwesomeIcon)
// ここまで

Vue.config.productionTip = false;

Vue.prototype.$axios = axios

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})
import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons'

library.add(faChevronCircleUp)

上記の2つの部分には使いたいアイコンを指定します。

複数アイコンを使う場合はカンマ区切りでインポートします。

一括でアイコンをインポートする場合は下記のようにします。

import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

最後に、該当のページで先程インポートしたアイコンを表示します。

<div class="return_top_button btn btn-secondary" v-show="returnTopActive" @click="returnTop()">
    <font-awesome-icon icon="chevron-circle-up" />  // この部分
</div>

GitHub

github.com