采用unplugin方式而不采用官方vue组件（因为会有第三方请求，图标是动态获取的）
注意，不能用<component :is=”xxx”>方式使用，会无法访问图标（打包时不会被打进去）或者用某种奇技淫巧使得打包时打进相应图标？
以下是G老师给的步骤（已经过验证）
在 Vite + Vue 项目中配置 Iconify 的最佳实践是使用 unplugin-icons。它可以让你像使用 Vue 组件一样使用成千上万个图标，且打包时只会引入你用到的图标（自动 Tree-shaking）。
以下是详细的配置流程：
第一步：安装依赖
你需要安装插件核心以及图标解析器：
Bash
pnpm add -D unplugin-icons unplugin-vue-components @iconify/json
unplugin-icons: 核心插件，负责将图标转化为 Vue 组件。unplugin-vue-components: 自动导入插件，让你不需要手动import图标组件。@iconify/json: (可选) 包含所有图标数据集。如果你想让插件在编译时自动从网络下载图标，可以不装这个，改用autoInstall: true。
第二步：配置 vite.config.ts
在 vite.config.ts 中添加以下配置。通过这种配置，你可以直接在模板中使用图标，无需手动导入。
TypeScript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
vue(),
// 1. 自动导入组件
Components({
resolvers: [
// 2. 自动注册图标组件
// prefix 用于给图标组件加前缀，比如 <i-fa-solid-user />
IconsResolver({
prefix: 'i',
enabledCollections: ['fa6-solid', 'fa6-regular'] // 限制使用的集合，提高类型提示速度
}),
],
}),
// 3. 图标插件配置
Icons({
autoInstall: true, // 如果没安装图标库，它会自动帮你安装
compiler: 'vue3', // 针对 Vue3 编译
}),
],
})
第三步：在项目中使用图标
配置完成后，你不需要 import 任何东西。图标组件的命名规则是：{prefix}-{collection}-{icon}。
例如，你想使用 Font Awesome 6 Solid 里的 user 图标：
HTML
<template>
<div>
<i-fa6-solid-user style="font-size: 2em; color: skyblue" />
<i-fa6-regular-envelope />
<i-mdi-home />
</div>
</template>
- 前缀 (
prefix): 我们在配置里设的是i。 - 图标库名 (
collection):fa6-solid对应 Font Awesome 6 Solid。 - 图标名 (
icon):user。
第四步：如何查找图标名称？
你可以去 Icones.js.org 搜索引擎：
- 搜索你想要的图标（如 “user”）。
- 点击进入
Font Awesome 6 Solid集合。 - 点击具体的图标，查看它的名称。
第五步：进阶优化（针对 IDE 提示）
为了让 VSCode 识别这些自动生成的组件而不报错，并在编写代码时提供代码补全，你需要在 tsconfig.json 中添加：
JSON
{
"compilerOptions": {
"types": ["unplugin-icons/types/vue"]
}
}
同时，unplugin-vue-components 会在根目录自动生成一个 components.d.ts 文件，请确保该文件在 tsconfig.json 的 include 范围内。
总结
这种方案之所以能解决你之前的 “体积过大” 问题，是因为：
- 零冗余：只有你在模板里写的
<i-fa6-solid-user />会被转译成 SVG 嵌入到 JS 中。 - 无需字体文件：不再需要加载
.woff或.ttf字体文件，也不需要引入几 MB 的all.css。 - 按需加载：每个图标都是一个独立的微型组件。