采用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 搜索引擎：

  1. 搜索你想要的图标（如 “user”）。
  2. 点击进入 Font Awesome 6 Solid 集合。
  3. 点击具体的图标，查看它的名称。

第五步：进阶优化（针对 IDE 提示）

为了让 VSCode 识别这些自动生成的组件而不报错，并在编写代码时提供代码补全，你需要在 tsconfig.json 中添加：

JSON

{
  "compilerOptions": {
    "types": ["unplugin-icons/types/vue"]
  }
}

同时，unplugin-vue-components 会在根目录自动生成一个 components.d.ts 文件，请确保该文件在 tsconfig.json 的 include 范围内。

总结

这种方案之所以能解决你之前的 “体积过大” 问题，是因为：

  1. 零冗余：只有你在模板里写的 <i-fa6-solid-user /> 会被转译成 SVG 嵌入到 JS 中。
  2. 无需字体文件：不再需要加载 .woff 或 .ttf 字体文件，也不需要引入几 MB 的 all.css。
  3. 按需加载：每个图标都是一个独立的微型组件。