cd-icon-picker 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,114 @@
+# cd-icon-picker
+
+Vue 3 图标选择器，支持 TDesign、RemixIcon 与自定义 SVG 精灵。默认中文交互，带搜索、分类与分页。
+
+## 特性
+
+- 支持来源切换：`Remix`、`TDesign`、`自定义`
+- 支持风格切换：`描边` 与 `填充`
+- 搜索支持字母子序列匹配（忽略大小写与连接符）
+- 自定义 SVG 通过精灵引用（`<symbol>`），无需单独组件注册
+- 输入展示支持两种模式：`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
+<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 文件为精灵：
+
+```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`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cd-icon-picker",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Vue 3 icon picker supporting TDesign & RemixIcon, with custom SVG via :diy-icon.",
   "license": "MIT",
   "type": "module",

package/src/IconPicker.vue

@@ -91,6 +91,7 @@ const props = defineProps({
   readonly: { type: Boolean, default: true },
   categoryMap: { type: Object as PropType<Record<string, string[]>> },
   mode: { type: String as PropType<'icon' | 'text'>, default: 'text' },
+  type: { type: String as PropType<'remix' | 'tdesign' | 'custom'>, default: 'remix' },
 });
 
 const emit = defineEmits(['change', 'update:value', 'update:tdesign', 'update:remixicon', 'update:svg']);
@@ -112,7 +113,7 @@ const rawIcons = computed<string[]>(() => {
 });
 
 const styleType = ref<'outlined' | 'filled'>('outlined');
-const sourceType = ref< 'remix'| 'tdesign' | 'custom'>('remix');
+const sourceType = ref<'remix' | 'tdesign' | 'custom'>('remix');
 const categoryType = ref<string>('all');
 
 const customIcons = computed(() => {
@@ -136,22 +137,18 @@ const displayValue = computed({
 });
 
 watchEffect(() => {
-  const bySource = sourceType.value === 'tdesign' ? props.tdesign : sourceType.value === 'remix' ? props.remixicon : props.svg;
-  currentSelect.value = props.value || bySource || '';
+  sourceType.value = (props.type as any) || sourceType.value;
+  let v = props.value || '';
+  if (sourceType.value === 'remix' && v && !/-line$|-filled$/.test(v)) {
+    v = v + (styleType.value === 'filled' ? '-filled' : '-line');
+  }
+  currentSelect.value = v;
 });
 
 watch([rawIcons, styleType, sourceType], () => {
   page.value = 1;
 });
 
-watch(
-  () => currentSelect.value,
-  v => {
-    emit('update:value', v);
-    emit('change', v);
-  },
-);
-
 const searchText = ref('');
 const categoryMap = computed(() => {
   if (props.categoryMap) return props.categoryMap as Record<string, string[]>;
@@ -185,8 +182,8 @@ const filteredIcons = computed(() => {
   }
 
   if (sourceType.value === 'remix') {
-    const suffix = useFill ? '-fill' : '-line';
-    list = list.map(n => (/-line$|-fill$/.test(n) ? n : `${n}${suffix}`));
+    const suffix = useFill ? '-filled' : '-line';
+    list = list.map(n => (/-line$|-filled$/.test(n) ? n : `${n}${suffix}`));
   }
 
   return searchText.value ? list.filter(i => i.includes(searchText.value)) : list;
@@ -213,6 +210,9 @@ function handleClick(icon: string) {
   if (sourceType.value === 'tdesign') emit('update:tdesign', icon);
   else if (sourceType.value === 'remix') emit('update:remixicon', icon);
   else emit('update:svg', icon);
+
+  emit('update:value', icon);
+  emit('change', sourceType.value as any, icon as any);
 }
 
 let timer: any = null;
@@ -271,3 +271,9 @@ function handleCancel() {
 .cd-picker-pagination { display: flex; justify-content: center; padding: 8px; }
 .cd-picker-empty { padding: 24px; }
 </style>
+watch(
+  () => sourceType.value,
+  v => {
+    emit('update:type', v);
+  },
+);