cd-icon-picker

Vue 3 图标选择器，支持 TDesign、RemixIcon 与自定义 SVG 精灵。默认中文交互，带搜索、分类与分页。

特性

• 支持来源切换：Remix、TDesign、自定义
• 支持风格切换：描边 与 填充
• 搜索支持字母子序列匹配（忽略大小写与连接符）
• 自定义 SVG 通过精灵引用（<symbol>），无需单独组件注册
• 输入展示支持两种模式：mode='text' 显示文字+图标，mode='icon' 仅图标

安装

npm i cd-icon-picker tdesign-vue-next remixicon

在应用入口注册：

import { createApp } from 'vue';
import TDesign from 'tdesign-vue-next';
import 'tdesign-vue-next/es/style/index.css';
import 'remixicon/fonts/remixicon.css';

import IconPickerPlugin from 'cd-icon-picker';

const app = createApp(App);
app.use(TDesign);
app.use(IconPickerPlugin);
app.mount('#app');

快速使用

<CdIconPicker
  v-model:type="iconType"
  v-model:value="iconValue"
  mode="text"
  width="200px"
  @change="(type, value) => { /*...*/ }"
/>

• mode='text'：输入框显示图标名称与前缀图标
• mode='icon'：仅显示图标，点击弹出选择对话框

组件属性（IconPicker）

• type: 'remix' | 'tdesign' | 'custom' 当前来源（v-model:type）
• value: string 当前图标基础名（v-model:value）
• tdesign?: string 旧版双向绑定（可选）
• remixicon?: string 旧版双向绑定（可选）
• svg?: string 旧版双向绑定（可选）
• pageSize: number = 140 每页显示数量
• copy: boolean = false 选择后是否复制图标名到剪贴板
• diyIcon: string[] | { prefix: string; icons: string[]; categoryMap?: Record<string, string[]> } 自定义 SVG 配置
• placeholder: string = '选择图标' 输入框占位
• searchPlaceholder: string = '搜索图标' 搜索框占位
• readonly: boolean = true 输入框只读
• categoryMap?: Record<string, string[]> 类别映射（可覆写内置）
• mode: 'icon' | 'text' = 'text' 展示模式

事件：

• update:type、update:value、change(type, value)

自定义 SVG

推荐使用 vite-plugin-svg-icons 自动注册 src/svg-icon 目录下的 SVG 文件为精灵：

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/svg-icon')],
      symbolId: 'icon-[name]',
    }),
  ],
});

在入口注册精灵：

// main.ts
import 'virtual:svg-icons-register';

构造 diyIcon：

// 自动读取文件名为 icons 列表
const files = import.meta.glob('./svg-icon/*.svg');
const icons = Object.keys(files).map(p => p.split('/').pop()!.replace('.svg',''));
const diyIcon = { prefix: 'icon', icons };

随后传入组件的 :diy-icon="diyIcon"，即可在“自定义”来源下选择上述 SVG。

搜索与分类

• 搜索采用字母子序列匹配：输入 aru 可匹配 ri-arrow-up-line/filled
• 当 type='remix' 且 value 不含后缀时，会按当前风格自动补全
  • 描边：-line
  • 填充：-filled