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

• 确保使用节点v16或更高版本
• 启动一个新Nuxt3项目：第一个月
• 我使用的是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项目现在可以自动安装相关的包了。

就这样!🎉
这个autoInstall特性大部分时间都能工作，但没有经过100%的实战测试。
我注意到它只能同时安装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了解更多更新。
PS2：如果你有一个预定义的图标数组，那么这个图标甚至可以用于动态组件，这样打包者就可以通过分析阅读提前知道它们。

您还可以使用相当新的包nuxt-icon，它是由CEO of NuxtLabs创建的，并用于nuxt3/content2入门模板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复制并粘贴你想要的图标名称。软件包将获取图标并粘贴到你的代码中。你有100k+个图标可以选择。

<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得到我的图标，他们与顺风工作得很好。