VueでFontAwesomeのアイコンを表示する方法（Vue.js）

7187 ワード
Vue.js vue-cli FontAwesome Vue.js テキストリンク

はじめに

Vue.jsを用いてポートフォリオサイトを制作するのに、Vue-cliを利用したのですが、コンポーネントでFontAwesomeの呼び出し方法がわからず苦戦しました。
そこでの経験を踏まえて、Twitterアイコン等を表示させるために使うFontAwesomeのVueでの導入方法と記述方法について書いていきます。

FontAwesomeを導入する

ルートディレクトリに移動する

> cd my-project

インストールする

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

さらに多くのアイコン（twitterアイコンなど）を使いたい場合はこちらも追加でインストールする

> npm install --save @fortawesome/free-brands-svg-icons
> npm install --save @fortawesome/free-regular-svg-icons

インストール完了！

コーディング方法について

main.jsに以下のようにコードを追加する

src/main.js
import Vue from 'vue'
import App from './App.vue'

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

//追加でインストールした場合は下の2行も
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
//ここまで

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

あとは表示したい場所でアイコンを呼び出すだけです

アイコンを呼び出す

今回はAboutページでアイコンを呼び出してみます。

src/views/About.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>

    <!--Solidアイコン-->
    <font-awesome-icon :icon="['fas', 'envelope']"/>
    <!--Solidアイコンの省略記法-->
    <font-awesome-icon icon="envelope" />
    <!--Regularアイコン-->
    <font-awesome-icon :icon="['far', 'envelope']"/>
    <!--Brandsアイコン-->
    <font-awesome-icon :icon="['fab', 'twitter']"/>

  </div>
</template>

呼び出しに成功しているか確認します

ちゃんと表示されています！

まとめ

自分はTwitterアイコンの呼び出しをを省略記法で記述していたためうまく表示されませんでした。Solidアイコンのみ省略記法で呼び出すことができ、そのほかのRegularやBrandsアイコンについてはきちんと記述する必要があるようです。
以上、VueでFontAwesomeのアイコンを表示する方法でした。読みにくい点や異なる点などございましたら、ご指摘お願いします。

参考