参考
環境
> node -v v17.6.0 > npm -v 8.5.1
npm install
npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/vue-fontawesome@prerelease
- free-regular-svg-iconsとfree-brands-svg-iconsも必要に応じてインストール
コード
nuxt.config.ts
import { defineNuxtConfig } from "nuxt"; export default defineNuxtConfig({ build: { transpile: [ "@fortawesome/fontawesome-svg-core", "@fortawesome/free-regular-svg-icons", "@fortawesome/free-brands-svg-icons", "@fortawesome/free-solid-svg-icons", "@fortawesome/vue-fontawesome", ], }, css: ["@fortawesome/fontawesome-svg-core/styles.css"], });
plugins/Fontawesome.ts
import { library } from "@fortawesome/fontawesome-svg-core"; // import { fas } from "@fortawesome/free-solid-svg-icons"; // import { far } from "@fortawesome/free-regular-svg-icons"; import { faGoogle, faTwitter } from "@fortawesome/free-brands-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; export default defineNuxtPlugin((nuxtApp) => { library.add(faGoogle, faTwitter); nuxtApp.vueApp.component("font-awesome-icon", FontAwesomeIcon); });
※利用するフォントをlibraryにaddする。fasとかfabをimportすると全てのフォントを一括でimportできるっぽい。
login.vue
<template> <font-awesome-icon :icon="['fab', 'google']" /> </tempalte>