😽

Nuxt3 + FontAwsome 導入方法

2022/05/17に公開

Nuxt3でiconを使いたくなったので、FontAwesomeを導入しました。

↓に詳しく導入手順が書いてありますが、よりシンプルにまとめました。
https://github.com/FortAwesome/vue-fontawesome#nuxtjs

導入手順

STEP 1

ライブラリをインストール

npm install -D @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome@prerelease @fortawesome/free-solid-svg-icons

STEP 2

ファイルを作成
pluginsフォルダを作成し、fontawesome.tsファイルを作成する。

作成したファイルに以下を記述する。

fontawesome.ts
import { config, library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
//以下は個別にアイコンを指定してimportする方法。こちらのほうが軽量で済む。
//{}には使いたいアイコン名を書く
//import { faCirclePlus, faBars } from '@fortawesome/free-solid-svg-icons'

export default defineNuxtPlugin((nuxtApp) => {

  config.autoAddCss = false
  library.add(fas)
  //個別フォントをimportした場合は以下を使う
  //library.add(faCirclePlus, faBars)
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

STEP 3

nuxt設定ファイルに追記する。

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

もしtailwindcssが入っている場合は、こんな感じなっていればOKです。

nuxt.config.ts
export default defineNuxtConfig({
  css: ["@/assets/styles/tailwind.css", '@fortawesome/fontawesome-svg-core/styles.css'],
  plugins: [
    '@/plugins/fontawesome.ts'
  ],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
        },
      },
    },
  },
})

STEP 4

vueコンポーネントで使いたいフォントを指定すればOKです。

components/PostItem.vue
<script setup lang="ts"></script>
<template>
<div>
<font-awesome-icon icon="circle-plus" size="2x" :style="{color: 'red'}"/>
</div>
</template>

script内には何も追記する必要はありません。

STEP おまけ

ビルドしたときにエラーが出たという記事を見かけましたが、
再現しませんでした。

npm run build

もし、エラーが出たらこの記事を参考にしてみてください。
https://zenn.dev/itsuo/articles/24e4f16eb0a190

Discussion