【Vue.js】Font awesomeを導入してみた - はなちるのマイノート

はじめに

今回はVue.jsにFont awesomeを導入してみる記事になります！

f:id:hanaaaaaachiru:20190820195314p:plain

こんな感じのアイコンを使いたい場合も多いのではないでしょうか？

このアイコンはFont awesomeというものを利用していて、全部ではないですが無料で使うことができます。

その導入方法について備忘録としての意味合いも込めて残しておきたいと思います。

準備

まずは導入したい任意のプロジェクトに移動しましょう。

cd vue-project

次にnpmを用いて以下の３つのコマンドを打ち込みます。

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

さいごにmain.jsに以下のコードを追加。

import Vue from 'vue'
import App from './App.vue'

/* Font awesomeを導入 */
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas)

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

new Vue({
  el: '#app',
  render: h => h(App)
})