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>