@fuxishi/svg-icon

Vue 3 图标组件库，支持 Iconify 图标集和本地 SVG，多 UI 框架预设，Vite 插件自动类型生成。

特性

• Iconify 图标集 — 支持所有 @iconify-json 图标包，一键加载海量图标资源
• 本地 SVG — 通过 import.meta.glob 自动加载本地 SVG 文件，支持多级目录
• 多 UI 框架预设 — 拆分为独立 picker 包，支持 Element Plus、Naive UI、AntDv Next、TDesign
• Vite 插件 — 自动生成精确到每个图标名的 TypeScript 类型声明，IDE 智能提示
• 图标选择器 — Headless composable + 多框架预设，搜索、分页、自定义 Tab
• TypeScript — 完整类型定义，泛型推导精确图标名，全局组件类型增强

安装

pnpm add @fuxishi/svg-icon

快速开始

1. 配置 Vite 插件

// vite.config.ts
import { fxDtsPlugin } from '@fuxishi/svg-icon/vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('./src/assets', import.meta.url)),
    },
  },
  plugins: [
    vue(),
    fxDtsPlugin({
      svgGlobPattern: '~/svgs',       // 本地 SVG 目录（可选），支持别名前缀，自动补全 glob
      // svgGlobPattern 也支持: '/src/assets/svgs', '@/assets/svgs', '~/svgs/**/*.svg'
      dtsDir: '@/types',              // 类型声明输出目录，支持别名前缀
      // dtsDir 也支持: 'src', '/types', 'src/types'
      splitDts: true,                 // 按图标集拆分类型文件
    }),
  ],
})

2. 安装图标选择器预设（可选）

根据你的 UI 框架安装对应的 picker 包：

::: code-group

pnpm add @fuxishi/svg-icon-element-plus-picker

pnpm add @fuxishi/svg-icon-naive-picker

pnpm add @fuxishi/svg-icon-antdv-picker

pnpm add @fuxishi/svg-icon-tdesign-picker

:::

| UI 框架 | Picker 包 | |---------|-----------| | Element Plus | @fuxishi/svg-icon-element-plus-picker | | Naive UI | @fuxishi/svg-icon-naive-picker | | AntDv Next | @fuxishi/svg-icon-antdv-picker | | TDesign | @fuxishi/svg-icon-tdesign-picker |

也可以不安装任何 picker 包，直接使用 useIconSelect API 自定义图标选择器。

3. 初始化

// main.ts
import { setupIcons } from 'virtual:fx-svg-icon'

const app = createApp(App)
setupIcons(app) // 自动注册组件 + 加载图标数据 + 加载本地 SVG
app.mount('#app')

setupIcons 一行搞定所有事情：注册 FxIcon 全局组件、自动检测已安装的 picker 包并注册 FxIconSelect、加载已安装的 @iconify-json/* 图标数据、通过 import.meta.glob 加载本地 SVG 图标。

4. 使用图标

<template>
  <!-- Iconify 图标集 -->
  <FxIcon name="ep:edit" />
  <FxIcon name="ep:delete" :size="24" color="#409eff" />

  <!-- 本地 SVG 图标 -->
  <FxIcon name="svg:my-icon" :size="32" />
</template>

5. 使用图标选择器

<template>
  <FxIconSelect v-model="selectedIcon" placeholder="请选择图标" />
</template>

<script setup>
import { ref } from 'vue'
const selectedIcon = ref('')
</script>

文档

在线文档：https://fuxi-zy.github.io/fx-svg-icons/

License

MIT