整合Iconify图标库

官网：https://iconify.design/

核心思想

• unplugin-icons：在构建时自动导入 SVG 图标（支持按需加载、tree-shaking）。
• Iconify：提供了非常庞大的开源图标库（Material、Carbon、Tabler、Ant Design 等几万枚图标）。
• 两者结合，可以让你在 Vue 里用组件的方式直接写 <Icon... /> 来调用图标，而不用手动引入 SVG 文件。

---

一、安装依赖

在 Vue 3 + Vite 项目中执行：

npm install -D unplugin-icons

如果你要配合 unplugin-vue-components 一起用（推荐，能自动注册组件），再装：

npm install -D unplugin-vue-components

---

二、配置 Vite

在 vite.config.js 中加入：

import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default {
  plugins: [
    // 自动导入组件
    Components({
      resolvers: [
        // 自动解析图标组件
        IconsResolver({
          prefix: 'Icon', // 组件前缀，比如 <IconMdiHome />
        }),
      ],
    }),
    // 自动安装和按需导入图标
    Icons({
      autoInstall: true,
    }),
  ],
}

---

三、在 Vue 中使用图标

1. 使用 Iconify 图标集合

Iconify 的图标集合都以 前缀区分，比如：

• mdi → Material Design Icons
• bi → Bootstrap Icons
• carbon → Carbon Icons
• ant-design → Ant Design Icons

使用时直接写组件名：

<template>
  <div>
    <IconMdiHome /> <!-- Material 图标：房子 -->
    <IconBiAlarm /> <!-- Bootstrap 图标：闹钟 -->
    <IconCarbonUserAvatar /> <!-- Carbon 图标：用户头像 -->
  </div>
</template>

只要你写了 <Icon... />，构建时会自动下载并注册对应的图标。

---

2. 自定义大小和颜色

图标本质是 SVG，可以通过样式控制：

<IconMdiHome class="w-6 h-6 text-red-500" />

（如果你在用 Tailwind，会特别舒服）

---

四、额外功能

1. 离线自定义图标集： 你也可以在 src/assets/icons 放置本地 SVG 文件，unplugin-icons 会把它们作为组件注册，命名为 IconCustomXxx。
2. 与 Element Plus、Naive UI 等 UI 框架结合： 配合 unplugin-vue-components，UI 组件和图标都能自动导入，无需在每个文件 import。

---

✅ 总结：

• unplugin-icons 负责把图标转成 Vue 组件。
• Iconify 提供了超大图标库，直接通过前缀调用。
• 配置好后，只需要写 <IconMdiHome /> 就能用，非常适合 Vue 项目。

---

更简洁的配置

1. 安装依赖

npm install @iconify/vue

或

yarn add @iconify/vue

---

2. 在项目中注册 Icon 组件

有两种常见方式：

✅ 全局注册（推荐）

在 main.ts（或 main.js）里：

import { createApp } from 'vue'
import App from './App.vue'
import { Icon } from '@iconify/vue'

const app = createApp(App)
app.component('Icon', Icon) // 全局注册
app.mount('#app')

这样，你就可以在任何地方直接用 <Icon /> 标签。

---

✅ 局部引入

在需要使用的组件里：

<script setup lang="ts">
import { Icon } from '@iconify/vue'
</script>

<template>
  <Icon icon="carbon:building-insights-2" width="32" height="32" style="color: #ec7373" />
</template>

---

3. 使用示例

<template>
  <div>
    <Icon icon="carbon:building-insights-2" width="32" height="32" style="color: #ec7373" />
    <Icon icon="mdi:home" width="40" height="40" style="color: #4caf50" />
  </div>
</template>

---

4. 补充说明

• icon="carbon:building-insights-2" → carbon 表示图标库，building-insights-2 表示具体图标名称。
• 你可以去 Iconify 图标库 (opens new window) 搜索需要的图标，直接复制名称。
• width / height / style="color:xxx" 都可以直接控制图标大小和颜色。