はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Vue.js】Font awesomeを導入してみた

はじめに

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

f:id:hanaaaaaachiru:20190820195314p:plain

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

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

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

準備

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

cd vue-project


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

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)
})

使い方

使うことができるアイコンの一覧は以下のサイトに載っています。

fontawesome.com

ちなみに今回の導入の方法だと、左の一覧のFreeSolidのみ利用可能です。

f:id:hanaaaaaachiru:20190820200757p:plain

たとえば最初の例のようなペンのアイコンを使う場合はこのように書きます。

<font-awesome-icon icon="pen-nib" />

f:id:hanaaaaaachiru:20190820195314p:plain

さいごに

収録されているアイコンはどれも素晴らしいので、見た目を盛れていい感じです。

良かったら利用してみてください。