VueでFont Awesomeを使う

Font Awesomeといえば殆どの人がWebサイト上で見たことがあるアイコンを提供しているライブラリです。 通常はCSSを読み込むように、CDNを通してからWebサイト上に読み出して以下のようにして使います。 ```html ``` Vueを使っている場合も同様の書き方が可能ですが、アイコンをコンポーネントとして使う場合にはひと手間必要になります。 VuetifyなどのVueを前提としたCSSフレームワークはすでに導入されていることが多いので、今回はまっさらなVueで使う場合です。 ## Font Awesomeを使う 初めにFontAwesomeに関するモジュールをインストールします。 ```bash yarn add @fontawesome/fontawsome-svg-core @fontawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome ``` インストール後、Vueを構成するためのjsファイルにモジュールを呼び出します。 ```javascript import Vue from "vue"; import { library } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { fas } from "@fortawesome/free-solid-svg-icons"; import { fab } from "@fortawesome/free-brands-svg-icons"; ``` どの単一コンポーネントファイルでも呼び出せるように、Vueにコンポーネントを登録します。`font-awesome-icon`となっていますが、使いやすい名前に変更が可能です。Vuetifyでは`v-icon`となっています(入力がとても簡単)。 ```javascript Vue.component("font-awesome-icon", FontAwesomeIcon); ``` あとは使いたい単一コンポーネントファイルで呼び出すだけです。 ```html Home ``` ## 簡単には呼び出せないアイコンの呼び出し方 基本的に上記のインストール方法で、ほとんどのアイコンが使えるのですが、一部`icon="name"`では呼び出せないものがあります(facebookやgoogleのアイコン等)。 モジュール呼び出しの部分でアイコン名を直接入力することでも可能なのですが、上記のインストール方法を変更しない場合は以下のように、アイコンをオブジェクト型で詳細に呼び出します。 ```html ```