Font AwesomeをVue.jsにインストールして使う

Vue.jsにFont Awesomeをインストールして使います。

インストール

下記のパッケージをインストールします。

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

追加分のiconも利用したい場合は、こちらのパッケージもインストールしてください。

$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons

importの設定

src/main.js に下記のように編集します。 下記のケースではアイコンのspinnerだけを利用しています。

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

/* 追加ここから */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
library.add(faSpinner)
 
Vue.component('font-awesome-icon', FontAwesomeIcon)
/* 追加ここまで */
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

ほかのアイコンが必要な場合は、下記のように必要なアイコンをimportして、libraryに追加してください。

import { faSpinner, faArrowDown} from '@fortawesome/free-solid-svg-icons'
library.add(faSpinner, faArrowDown)

えいやぁで全部追加する場合は、下記のように書くこともできます。

import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)

.vueで利用する

実際 .vueファイルでアイコンを利用する場合は、下記のようになります。

<template>
  <fa-icon icon="spinner" class="fa-3x fa-pulse" />
</template>

参考サイト

fontawesome.com

github.com

www.npmjs.com

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

基礎から学ぶ Vue.js