Vue.js (TypeScript) で Font Awesome を使う方法をまとめました。
概要
@fortawesome/vue-fontawesome を使うと font-awesome-icon コンポーネントをテンプレートに埋め込むのみでアイコンを表示できる。ビルド時には必要なアイコンのみをバンドルできるため、アプリのサイズを最小限に抑えることができる。
TypeScript を使う場合は、型定義ファイルが用意されていないため、自分で用意する必要がある。
使い方
main.ts
import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus, faMinus, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faPlus, faMinus, faExternalLinkAlt);
Vue.component('font-awesome-icon', FontAwesomeIcon);
src/@types/fortawesome__vue-fontawesome.d.ts
declare module '@fortawesome/vue-fontawesome';
Component (template)
<font-awesome-icon icon="external-link-alt" />