Vueで無料の範囲でFont Awesomeを使う
無料の範囲でFont Awesomeを利用する方法です。 理解に地味に時間がかかったのでメモしておきます。
インストール
$ 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']" />
その他のオプション
サイズを変えたり、回転したり、変形したり、アニメーションさせたり色々できるようなので、そのあたりは公式ドキュメントを確認してみてください。