Top > Vue.js関連 > Vuetify3 で優れたアイコンフォントを使う方法[Vuetify3, font-awesome]

Vuetify3 で優れたアイコンフォントを使う方法[Vuetify3, font-awesome]

2022年11月1日に満を持してリリースされたVuetify 3 (コードネーム：Titan)。
この記事を書いている現在(2023年1月15日)、早くも version 3.1.1(コードネーム：Valkyrie) に更新されている様です。

今回はその Vuetify 3 と一緒に、
言わずと知れた有名アイコンライブラリである Font-awesome を使用する方法について、書いていきます。

なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

Vuetify 3 のデフォルトのアイコンは mdi (Material Design Icons)

タイトルの通り、Vuetify 3 にバンドルされているデフォルトのアイコンフォントは、
Material Design Icons になります。
これを、有名アイコンライブラリである Font-awesome に置き換えてみます。

Font-awesomeをインストールする

Vuetify3のインストールは済んでいるものとします。(未インストールや、インストール方法を知りたい方はこの記事：2023年1月リリースのVuetify3.1.0(Valkyrie)をインストールしてみた件[Vue3, Vuetify3] をご覧ください)

対象のディレクトリにターミナルから移動(cd ≒ change directory)して、
次を実行して Font-awesome をインストールします。

npm install @fortawesome/fontawesome-free -D

↑なお、名前が@fortawesome (フォートオーサム)となっており、一見「ん？」「偽物じゃないの？」と思うかもしれませんが(最初私は思いました)、
これがオフィシャルなパッケージ名です。（Font-awesome公式のこちら参照)

Font-awesome のインストールが済んだら、
Vuetify3をインストールしたディレクトリの以下
src/plugins/vuetify.js

↑このファイルを開きます。
この vuetify.js に、Font-awesomeを使用するためのコードを追加します。
まず、7行目あたりにある // Styles のコメントアウトの次の行、
import '@mdi/font/css/materialdesignicons.css' となっているところを、
次のように書き換えます。

import '@fortawesome/fontawesome-free/css/all.css'
import { aliases, fa } from 'vuetify/iconsets/fa'

続いて、15行目あたりにある
export default createVuetify({ ...(中略)
という記述の次の行に、以下を記述します。

export default createVuetify({
  icons: {
    defaultSet: 'fa',
    aliases,
    sets: {
      fa,
    }
  },
  theme: {
    themes: {
    ...(中略)...

↑追記するのは、上記の icons: {…
から始まる7行です。
書いている事としては、「Vuetify3でこのアイコンセットを使うよ」という各種設定になります。

以上を追記するだけで、Font-awesome を Vuetify 3 で使用する準備が整ったことになります！

試しに表示してみる

上のセクションまでの手順で、
Font-awesome を Vuetify 3 で使用する準備が整いました。

では早速、試しに表示してみるとします。
簡単に試すだけなので、Vuetify 3 の初期画面のアイコンを変えてみることにしました。
対象ファイルは
src/components/HelloWorld.vue
↑…あんまり触る気が起きない名前ですが、お試しということで…。ここのアイコンを変えてみます。

上記、初期画面用コンポーネントの
25行目
45行目
63行目
↑この辺りに、v-icon を使用している場所があります。
その部分を、デフォルトのmdi(MaterialDesignIcons)から
Font-awesome に変更してみます。

具体的には、次の通り。
[25行目あたりの v-icon を書き換え]

<v-icon
  icon="fa-solid fa-puzzle-piece"
  size="large"
  start
/>

[45行目あたり v-icon を書き換え]

<v-icon
  icon="fa-solid fa-arrow-right"
  size="large"
  start
/>

[63行目あたり v-icon を書き換え]

<v-icon
  icon="fa-solid fa-people-group"
  size="large"
  start
/>

すると、次のようにアイコンを変更することができます。

↑キャプチャ下部の COMPONENTS, GET STARTED, COMMUNITY の部分のアイコンをご覧ください。
Vuetify 3 デフォルトの mdi(MaterialDesignIcons) とはまたちがったテイストの、
丸みを帯びた Font-awesome らしいアイコンになりました。