你如何在 nuxt 3 上获得很棒的字体设置

Question

当我尝试在我的 nuxt 3 应用程序中渲染这个很棒的字体组件时，我收到以下错误，正确地遵循了所有 npm 安装并且无法在没有任何错误的情况下获取应用程序中的图标。

  at WeakMap.set (<anonymous>)  
  at normalizePropsOptions (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3966:11)  
  at createComponentInstance (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6957:23)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:171:22)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:608:12)  
  at _sfc_ssrRender (./.nuxt/dist/server/server.mjs:2939:33)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:253:13)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:608:12)  
  at _sfc_ssrRender (./.nuxt/dist/server/server.mjs:9374:31)

这是破坏应用程序的代码行

<font-awesome-icon :icon="['fas', 'user']" />

nuxt.config 文件

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
    css: ["@/assets/css/tailwind.css"],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
    },
    plugins: ["~/plugins/fontawesome.js"],
    buildModules: [
        ["@pinia/nuxt", { disableVuex: true }],
        ["@nuxtjs/tailwindcss", { config: "@/tailwind.config.js" }],
    ],
    modules: ["@nuxtjs/tailwindcss"],
});

插件文件

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
// import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

export default defineNuxtPlugin((nuxtApp) => {
    // nuxtApp.vueApp.component("FontAwesomeIcon", FontAwesomeIcon);
    library.add(fas);
});

我使用该插件是因为无论出于何种原因设置 npm @nuxt/fortawesome 都不起作用

包.json

    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/free-brands-svg-icons": "^6.1.1",
        "@fortawesome/free-solid-svg-icons": "^6.1.1",
        "@fortawesome/vue-fontawesome": "^2.0.8",
        "@supabase/supabase-js": "^1.35.3",
        "pinia": "^2.0.14"
    }
}

Answer 1

使用我的solution here，基于unplugin-icons 能够解决 OP 的问题。

最后，像这样的东西会产生完全相同的结果，但它是通用的、高性能的，而且对于未来的任何类型的库，你只需要做一次结果。

<script setup>
import IconXmark from `~icons/fa6-solid/xmark`
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
</template>

Answer 2

安装包

pnpm i @fortawesome/fontawesome-svg-core
pnpm i @fortawesome/free-solid-svg-icons
pnpm i @fortawesome/free-regular-svg-icons
pnpm i @fortawesome/free-brands-svg-icons

添加此插件

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSms } from '@fortawesome/free-solid-svg-icons'
import { faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons'

library.add(faTwitter)
library.add(faFacebook)
library.add(faSms)

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

享受

<template>
  <font-awesome-icon icon="fa-brand fa-whatsapp" />
</template>

Answer 3

我在用：

npm i @fortawesome/fontawesome-free

在我的资产文件夹中，我将其导入：

//  /assets/main.css
@import "@fortawesome/fontawesome-free/css/all.min.css";

此处注意：您需要确切的路径。

现在注册它：

// nuxt.config.ts

import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
  css: ["~/assets/main.css"],
});

是的，你可以开始了。你可以去 font awesome，搜索一个图标并复制粘贴它：

<i class="fa-solid fa-user"></i>

然后你应该能够看到它。

Answer 4

这与最新的更新不一致。 这是在 Nuxt3 上安装 font-awesome 的方法。

1. 安装

   npm i -D @fortawesome/fontawesome-svg-core
   npm i -D @fortawesome/free-solid-svg-icons
   npm i -D @fortawesome/free-regular-svg-icons
   npm i -D @fortawesome/free-brands-svg-icons
   npm i -D @fortawesome/vue-fontawesome@latest-3    <=== Extremely Critical
   

   2. Nuxt配置

   export default defineNuxtConfig({
     plugins: [
       { src: '~/plugins/font-awesome.ts' },
     ],
   })
   

   3. 插件配置

   import {library, config} from '@fortawesome/fontawesome-svg-core'
   import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
   import {
     faHospital as farHospital
   } from '@fortawesome/free-regular-svg-icons'
   import {
     faCircleUser as fasCircleUser,
     faBars as fasBars,
     faHospital as fasHospital
   } from '@fortawesome/free-solid-svg-icons'
   import {faDiscord as fabDiscord} from '@fortawesome/free-brands-svg-icons'
   
   // This is important, we are going to let Nuxt worry about the CSS
   config.autoAddCss = false
   
   // You can add your icons directly in this plugin. See other examples for how you
   // can add other styles or just individual icons.
   library.add(
     farHospital,
     fasHospital,
     fasBars,
     fabDiscord
   )
   
   export default defineNuxtPlugin(({vueApp}) => {
     vueApp.component('FontAwesomeIcon', FontAwesomeIcon)
   })
   

   1. 测试渲染

      <template>
        <div>
          <font-awesome-icon :icon="['fas', 'hospital']" />
          <font-awesome-icon :icon="['far', 'hospital']" />
          <font-awesome-icon :icon="['fas', 'bars']" />
        </div>
      <template>