🔆

Nuxt 3でFont Awesomeのアイコンが使いたい

2023/02/25に公開

Nuxt

Font Awesomeとは

Font AwesomeはWebサイト使用できるフォントを提供するサービスです。ウェブサイトやアプリでよく使われるようなアイコンもフォントの形式で提供されるため、一般的なテキストと同様に使用できます。無料で提供されているものと有料で使用できるものがありますが、無料でも結構な量のフォントやアイコンを使用できるため多くのWebサイトで活用されています。

Nuxt 3にFont Awesomeのアイコンを組み込みたい

まずは基本のパッケージをインストールします。

pnpm install @fortawesome/vue-fontawesome@latest
pnpm install @fortawesome/fontawesome-svg-core

こうすることでpackage.jsonのdependenciesにこんな風に自動的に書き込まれます。

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/vue-fontawesome": "^3.0.3"
}

Freeで使えるアイコン

Fontawesomeには無料で使えるアイコンと、有料で使えるアイコンがあります。2023/02/25時点では2020のアイコンがフリーで使えます。

例えば、この中の左上のhouseというアイコンを使いたいとします。それをクリックするとポップアップが立ち上がります。
赤い丸で囲んだところは、使用しようとしているフレームワークをタブで選択できます。親切ですね。NuxtなのでVueを選択しています。ここで出てくるタグを最終的に貼り付ければ表示できるのですが、そのためには少し仕込みが必要です。

パッケージのインストール

先ほどは基本となるパッケージだけインストールしましたが、アイコンの種類に応じてさらにパッケージをインストールする必要があります。

無料のアイコンは「fa-solid」「fa-regular」「fa-brands」のいずれかに属するアイコンだけです。この例ですと「fa-solid」とあります。このパッケージをインストールしましょう。

どのパッケージをインストールしたら良いかはこちらで確認します。

prefixを見るとどのパッケージが「fa-solid」「fa-regular」「fa-brands」にそれぞれ対応しているかが分かりますね。

そういうわけで、free-solid-svg-icons をインストールします。

pnpm install @fortawesome/free-solid-svg-icons

package.jsonを見ると1行加わっているのが分かります。

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/vue-fontawesome": "^3.0.3"
　　　　　　　　"@fortawesome/free-solid-svg-icons": "^6.3.0",　// NEW
}

アイコンパッケージの登録

次に、Nuxt 3アプリのルートディレクトリに「plugins」というディレクトリを作成します。その直下に「fontawesome.js」というファイルを作成します。

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faHouse } from '@fortawesome/free-solid-svg-icons'

library.add(faHouse)

config.autoAddCss = false

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})

このようにしてアイコンをライブラリに登録します。すると先ほどのWebページで示されていたタグ<font-awesome-icon>をコンポーネントとして追加してくれます。

ここでは

import { faHouse } from '@fortawesome/free-solid-svg-icons'
library.add(faHouse)

という部分でこの家のアイコンである「faHouse」を登録しています。これは<font-awesome-icon icon="fa-solid fa-house" />というタグのprefix（ここでは「fa-solid」）ではない方の属性をキャメルケースで詰めて表記します。

<font-awesome-icon>タグの使用

ここまでできたらいよいよ表示できます。
app.vueを開いてこのタグを追加してみましょう。そのままだとバカでかいアイコンが表示されるのでstyle属性で高さを指定しています。

<template>
  <div>
    <font-awesome-icon icon="fa-solid fa-house" style="height: 100px" />
    <NuxtWelcome />
  </div>
</template>

ちゃんと左上の家のアイコンが表示されていますね。

この記事を参考にさせていただきました。