如何在 Nuxt3 中使用任何图标？

Question

当我尝试使用 vue-fontawesome 框架和@nuxtjs/fontawesome 框架时，我遇到了 Nuxtjs 错误，这是错误：

[nuxt] [request error] Cannot read properties of undefined (reading 'component')
    at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31)
    at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)

这是我在 nuxt.config.ts 中的代码：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/fontawesome'
  ],

  fontawesome: {
    icons: {
      solid: ['faXmark']
    }
  }
})

这是我要使用图标的组件：

<template>
  <div :class="props.className">
    <font-awesome-icon icon="xmark" />
    <slot />
  </div>
</template>

顺便说一句，错误只是在我尝试加载页面时出现，而不是在我运行加载页面时出现。

Answer 1

我推荐这个解决方案 antfu, which is IMO by far the best approach to work with any kind of icons: https://github.com/antfu/unplugin-icons
查看更多 in-depth article 解释整个过程的原因和方式。

这里有一个关于如何将它与 Nuxt3 一起使用的快速方法，首先满足要求：

务必使用 Node v16 或更高版本
开始一个新的 Nuxt3 项目：pnpm dlx nuxi init nuxt3-unplugin-icons
我正在使用 PNPM，所以 pnpm i --shamefully-hoist
添加上述包 pnpm add -D unplugin-icons

将其放入您的 nuxt.config.ts 文件

// @ts-nocheck
import { defineNuxtConfig } from 'nuxt'
import Icons from 'unplugin-icons/vite'

export default defineNuxtConfig({
  vite: {
    plugins: [
      Icons({
        // the feature below is experimental ⬇️
        autoInstall: true
      })
    ]
  }
})

我不知道如何修复类型，所以我忽略了这里的检查。

完成后，您可以转到 icones.js 并查找您的特定图标，单击它，您会看到这个

注意格式是 [collection-id]:[name]，所以在你的情况下是 fa6-solid:xmark。

现在您可以转到任何 .vue 文件并在导入时将 fa6-solid:xmark 格式转换为 ~icons/fa6-solid/xmark。

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

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

您的 Nuxt3 项目现在可以 auto-install 为您提供相关包。

仅此而已！

此 autoInstall 功能大部分时间都有效，但不是 100% battle-tested。
我注意到它只能同时安装 2 个图标包（服务器的简单重启解决了这个问题）。

如果自动安装功能失败，您可以随时转到 npm 并根据您的情况查找 @iconify-json/[your collection id] 又名 @iconify-json/fa6-solid。
NPM 非常擅长建议我所看到的好的建议。

这是一个关于如何使用其他一些图标的示例

<script setup>
import IconXmark from '~icons/fa6-solid/xmark'
import IconAccountBox from '~icons/mdi/account-box'
import TastyPizza from '~icons/noto-v1/pizza'
import IconPs from '~icons/ri/playstation-line'
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
  <icon-account-box style="font-size: 2em; color: red" />
  <tasty-pizza style="font-size: 2em" />
  <icon-ps style="font-size: 2em" />
</template>

而实际结果，如您所见CSS完全可定制

如果需要，您可以查看我的 github repo 以获得完整的示例。

PS：auto-import feature 正在制作中。欢迎订阅 Github PR 以获取更多更新。

如何在 Nuxt3 中使用任何图标？

How to use any icons with Nuxt3?

javascript

vue.js

nuxt.js

nuxtjs3