Vue.jsでFont Awesomeを使ったアイコンを表示させてみました

Vue.js を使ったWebアプリケーションの画面にアイコンを表示させたかったので、Font Awesome を使ってみました。

＊参考

＊環境

MacOS
Vue 2.9.6
fontawesome-svg-core 1.2.15
free-solid-svg-icons 5.7.2
vue-fontawesome 0.1.5

＊Font Awesome とは

人気のあるWebアイコンフォントをWebサイトで無料で使うことができるサービスです。
画像と違い拡大してもぼやけず、色も大きさも自由に変更することができます。
無料でも約1500種類のアイコンを使うことができますが、有料プランだとより多くのアイコンを使うことができます。

下記サイトでアイコンを検索することができます。
https://fontawesome.com/icons?d=gallery

＊事前準備（Vue環境の構築）

今回は、Vueプロジェクトを作成した下記内容の続きから追加しました。

＊パッケージのインストール

アイコンは下記タイプがあります。アイコンのインストールはこのタイプ毎に行います。

Solid : 内塗り
Regular : 線（内塗りの逆）
Light : 細い線（有料プランのみ）
Brands : ロゴ等

$ npm install --save @fortawesome/fontawesome-svg-core

# アイコンをタイプ毎にインストール
$ npm install --save @fortawesome/free-solid-svg-icons
$ npm install --save @fortawesome/free-regular-svg-icons
$ npm install --save @fortawesome/free-brands-svg-icons

# vueで使うためのインストール
$ npm install --save @fortawesome/vue-fontawesome

＊Vueに追加

Vueで使えるようにfontawesomeをインポートします。
使いたいアイコンごとにインポートしてライブラリに追加します。
<main.js>

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import { routes } from './routes'
import store from './store/store'
import { sync } from 'vuex-router-sync'

// ======= ↓追加ここから ==========
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee, faCheck, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

Vue.use(VueRouter)
library.add(faCoffee, faCheck, faCheckCircle)
Vue.component('font-awesome-icon', FontAwesomeIcon)
// ======= ↑追加ここまで ==========

const router = new VueRouter({
  mode:'history',
  routes
})

sync(store, router)

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

＊アイコンを画面に表示

コンポーネントにfont-awesome-iconタグを追加して、アイコン名を指定します。
色やサイズを変えたい場合は、classでCSSスタイルを指定します。
<components/Image.vue>

<template>
  <div>
    <div>
      <span>Cofee please.</span>
      <font-awesome-icon icon="coffee"></font-awesome-icon>
    </div>
    <div>
      <span>Check please.</span>
      <font-awesome-icon icon="check"></font-awesome-icon>
    </div>
    <div>
      <span>Check more please.</span>
      <font-awesome-icon icon="check-circle" class="icon-check-circle"></font-awesome-icon>
    </div>
  </div>
</template>

<script>
export default {
}
</script>
<style>
.icon-check-circle {
  color: #98fb98
}
</style>

＊所感

アイコンを表示したくてSVGを使うことを検討していたのですが、少し導入するのが面倒そうだと思っていたときに Font Awesome を見つけて使ってみたら簡単に導入することができました。
シンプルなアイコンを使いたい場合は、Font Awesome で十分そうなので今後積極的に取り入れていきたいと思います。

もぐもぐプログラミング