Nuxt3でfont awesomeを使う

参考

環境

> 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できるっぽい。

<template>
  <font-awesome-icon :icon="['fab', 'google']" />
</tempalte>