Zenn
🎱

Nuxt3で「Font Awesome」を使う方法

2023/11/03に公開
Font Awesome
Vue 3
Nuxt 3
tech

Nuxt3でFont Awesomeを使おうとした際に、最初上手くいかなかったのでメモに残しておこうと思います。
（明確な原因まで突き止めれていませんが、以下の方法で問題なく表示できています。不必要な点がございましたら、ぜひご指摘お願いします！）

＊2023年10月時点です。

InstagramとLINEのアイコンを表示するのが目的です。

環境

Nuxt 3.8.0
FontAwesome 3.0.3

vueファイルの記述

footer.vue
// template内の表示箇所に
<font-awesome-icon :icon="['fab', 'instagram']" />
<font-awesome-icon :icon="['fab', 'line']" />

※記述内容は「Font Awesome公式ドキュメント」で確認してください。

例）Instagramの場合

1.検索する

2.下にスクロールして「Vue.js」のコードを確認する
　　（マウスオーバーでコピー可能）

jsファイルの作成

ルートディレクトリに「plugins」フォルダを作成。
その中に「fontawesome.js」ファイルを作成。

fontawesome.js
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fab)

config.autoAddCss = false

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

※記述内容は「Font Awesome公式ドキュメント」参照

nuxt.config.jsに追記

nuxt.config.js
// 既に別のCSSの記述がある場合は、“css: [ ~ ]”内に追記します。
export default defineNuxtConfig({
  css: [
    "@fortawesome/fontawesome-svg-core/styles.css",
  ],
})

インストール

ターミナルに以下のコマンドを入力します。
（起動中の場合は、control+Cでいったん停止してください　※Macの場合）

npm i --save @fortawesome/vue-fontawesome@latest-3
// yarnの場合は公式ドキュメントを参照してください

以下もインストールしました。こちらは不要かもしれません。

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-brands-svg-icons

なお、インストール後の依存関係（package.json）は次のようになります。

"devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/vue-fontawesome": "^3.0.3",
  },
  "dependencies": {
    "@fortawesome/free-brands-svg-icons": "^6.4.2"
  }

参考

公式ドキュメント以外の参考はこちら

Discussion