のぐそんブログ

暗いおじさんがシコシコ書くブログです。

Vueで無料の範囲でFont Awesomeを使う

無料の範囲でFont Awesomeを利用する方法です。 理解に地味に時間がかかったのでメモしておきます。

fontawesome

インストール

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

Vueの設定

vue-cliで作ったプロジェクトの場合の設定です。 グローバルコンポーネントとして登録する例です。

src/main.js

apple-altを利用する場合です。

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

/* ここから */
import { library } from '@fortawesome/fontawesome-svg-core'

//apple-alt アイコンをimport
import { faAppleAlt } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

//利用するアイコンを設定
library.add(faAppleAlt)

Vue.component('font-awesome-icon', FontAwesomeIcon)

/* ここまで */

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

コンポーネントで利用する

<template>
  <div id="app">
    <font-awesome-icon icon="user-secret" />
  </div>
</template>

アイコンを全部読み込む

特定のアイコンだけ読み込むのではなく全部読み込む場合です。

import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

library.add(fas,fab,far)

solid(fas)以外を利用する

solid以外の、brands、regularを利用する場合は少し書き方が変わるようでした。

<font-awesome-icon :icon="['fab', 'android']" />
<font-awesome-icon :icon="['far', 'address-book']" />