Nuxt3でFontAwesomeを使う

Nuxt3でFontAwesomeを導入しようと各所の記事通りやっても上手くいかないことが多々あり…。
ちょっと古めの記事(RC版)が多く見受けられたので、改めて自分で整理してみます。

環境

Nuxt 3.4.0
FontAwesome 3.0.3

インストール

npm i --save @fortawesome/vue-fontawesome@latest-3

pluginの作成

公式チュートリアルの通りで大丈夫でした。
注意点として、SSR/SSGで動作させる場合は .client をつけてください。
サーバーサイドでレンダリングするとハイドレーションエラーが発生して、アイコンが二重に表示されたり不可解な挙動を起こしてしまうみたいです。

fontawesome.client.ts

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

config.autoAddCss = false

// regular/blandsを使いたい場合は別途インストールする
library.add(fas)
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})

nuxt.config.tsの編集

こちらも公式チュートリアル通りで。

nuxt.config.ts

export default defineNuxtConfig({
css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ]
})

使い方

iconは以下のように配列で渡すようです。
他の記事では文字列で渡していたりしていましたが、自分の環境ではうまくいかず。

sample.vue

<FontAwesomeIcon :icon="['far', 'bell']" />

参考

https://fontawesome.com/docs/web/use-with/vue/use-with
https://ema-hiro.hatenablog.com/entry/2022/07/17/015626
https://zenn.dev/one_dock/articles/16f1ddb1e49b2c