😽
Nuxt3 + FontAwsome 導入方法
Nuxt3でiconを使いたくなったので、FontAwesomeを導入しました。
↓に詳しく導入手順が書いてありますが、よりシンプルにまとめました。
導入手順
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
もし、エラーが出たらこの記事を参考にしてみてください。
Discussion