我推荐antfu的这个解决方案，这是IMO迄今为止处理任何类型图标的最佳方法：https://github.com/antfu/unplugin-icons
检查更多的in-depth article解释为什么和如何整个事情的工作。
下面是如何将其与Nuxt 3一起使用的快速方法，首先是要求：

• 请确保使用Node v16或更高版本
• 启动新Nuxt 3项目：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>

您的Nuxt 3项目现在将能够自动为您安装相关的软件包。

仅此而已！🎉
这个autoInstall特性在大多数情况下都能工作，但并不是100%经过实战测试的。
我注意到它只能同时安装2个图标包（一个简单的重新启动服务器修复了这个问题）。
如果自动安装功能失败，您可以随时转到npm，并在您的情况下查找@iconify-json/[your collection id] aka @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了解更多更新。
PS2：如果你有一个预定义的图标阵列，那么它甚至可以与动态组件一起使用，这样捆绑器就可以通过分析阅读提前知道它们。

您还可以使用相当新的包nuxt-icon，它是由CEO of NuxtLabs创建的，并在nuxt 3/content 2启动器模板content-wind中使用。

安装

npm install --save-dev nuxt-icon

yarn add --dev nuxt-icon

安装Nuxt 3

nuxt.config.ts

export default defineNuxtConfig({
   modules: ['nuxt-icon']
})

用法

只需从icones.js.org复制并粘贴你想要的图标名称。软件包将提取图标并粘贴到你的代码中。你有100 k+个图标可供选择。

<Icon name="logos:google-icon"></Icon>
<Icon name="logos:facebook"></Icon>
<Icon name="logos:apple" fill="#97a3b6"></Icon>

仅在使用自定义SVG图标时适用

当我使用自定义svg图标（没有图标框架）时，我通常使用vite-svg-loader。

yarn add vite-svg-loader --dev

nuxt.config.ts

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  vite: {
    plugins: [
      svgLoader({})
    ]
  }
})

安装完成后，我创建了一个新组件，以后可以在其他组件中使用它（components/IconLoader.vue）：

<template>
  <component :is="icon" />
</template>

<script>
  const props = defineProps<{ name: string }>()
  const icon = computed(() => 
    defineAsyncComponent(() => import(`../assets/icons/${props.name}.svg`))
  )
</script>

现在，我可以轻松地显示图标与我们的新的自定义图标加载器组件（例如App.vue）：

<template>
  <icon-loader name="calendar" /> // assuming there is a calendar.svg file in your assets folder.
</template>

我通常从https://heroicons.dev得到我的图标，他们与顺风工作得很好。