VuetifyでFont　Awesomeを使う方法

以前1回やったはずなのにすっかり忘れていたのでメモ。

npmでfontawesomeのfree版をインストールします。

npm install --save @fortawesome/fontawesome-free

main.jsでimportします。

import '@fortawesome/fontawesome-free/css/all.css'

使いたいコンポーネントで下記のように指定すればOK。

<v-icon>fas fa-pen</v-icon>

色の変更はこんな感じ。
primaryなどVuetifyのテーマに合わせた色にもできます。

<v-icon color="red">fas fa-pen</v-icon>
<v-icon color="primary">fas fa-pen</v-icon>

サイズも変更できます。

<v-icon small>fas fa-pen</v-icon>
<v-icon medium>fas fa-pen</v-icon>
<v-icon x-large>fas fa-pen</v-icon>

ボタンの中に使うときは left right を使ってあげるといい感じになります。

<v-btn><v-icon small left>fas fa-pen</v-icon>編集</v-btn>
<v-btn>編集<v-icon small right>fas fa-pen</v-icon></v-btn>

ダークテーマ、ライトテーマなどに合わせた色にも変更可能です。
ドキュメントは下記。
（日本語版だと一部説明が不足するので英語版がおすすめです。）