cd-icon-picker

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

特性

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

安装

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

在应用入口注册：

`ts
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');
`

快速使用

`vue
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 } 自定义 SVG 配置
- placeholder: string = '选择图标' 输入框占位
- searchPlaceholder: string = '搜索图标' 搜索框占位
- readonly: boolean = true 输入框只读
- categoryMap?: Record 类别映射（可覆写内置）
- mode: 'icon' | 'text' = 'text' 展示模式

事件：
- update:type、update:value、change(type, value)

自定义 SVG

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

`ts
// 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]',
}),
],
});
`

在入口注册精灵：

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

构造 diyIcon：

`ts
// 自动读取文件名为 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`