cd-icon-picker 0.1.0

package/index.ts

@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+import Icon from './src/Icon.vue';
+import SvgIcon from './src/SvgIcon.vue';
+import IconPicker from './src/IconPicker.vue';
+
+const install = (app: App) => {
+  app.component('CdIcon', Icon);
+  app.component('CdSvgIcon', SvgIcon);
+  app.component('CdIconPicker', IconPicker);
+};
+
+export { Icon, IconPicker, SvgIcon, install };
+
+export default { install };

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "cd-icon-picker",
+  "version": "0.1.0",
+  "description": "Vue 3 icon picker supporting TDesign & RemixIcon, with custom SVG via :diy-icon.",
+  "license": "MIT",
+  "type": "module",
+  "main": "index.ts",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "data",
+    "index.ts"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "tdesign-vue-next": "^1.0.0",
+    "remixicon": "^4.7.0"
+  },
+  "keywords": [
+    "vue3",
+    "icon-picker",
+    "tdesign",
+    "remixicon",
+    "svg"
+  ]
+}

package/src/Icon.vue

@@ -0,0 +1,55 @@
+<template>
+  <SvgIcon v-if="isSvgIcon" :size="size" :name="getSvgIcon" :class="[$attrs.class, 'cd-icon']" :spin="spin" />
+  <i v-else-if="isRemixIcon" :class="['cd-icon', $attrs.class, icon, spin && 'svg-icon-spin']" :style="getStyle"></i>
+  <t-icon v-else :name="icon" :size="size" :color="color" :spin="spin" :class="[$attrs.class, 'cd-icon']" />
+</template>
+<script lang="ts">
+import type { PropType } from 'vue';
+import { defineComponent, computed } from 'vue';
+import SvgIcon from './SvgIcon.vue';
+
+const SVG_END_WITH_FLAG = '|svg';
+export default defineComponent({
+  name: 'Icon',
+  components: { SvgIcon },
+  props: {
+    icon: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: [String, Number] as PropType<string | number>,
+      default: 16,
+    },
+    spin: {
+      type: Boolean,
+      default: false,
+    },
+    prefix: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
+    const getSvgIcon = computed(() => props.icon?.replace(SVG_END_WITH_FLAG, ''));
+    const isRemixIcon = computed(() => props.icon?.startsWith('ri-'));
+    const getStyle = computed((): Record<string, any> => {
+      const s = `${String(props.size).replace('px', '')}px`;
+      return {
+        fontSize: s,
+        color: props.color || undefined,
+      };
+    });
+    return { isSvgIcon, getSvgIcon, isRemixIcon, getStyle };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.svg-icon-spin { animation: loadingCircle 1s infinite linear; }
+@keyframes loadingCircle { 100% { transform: rotate(360deg); } }
+</style>

package/src/IconPicker.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="cd-icon-picker-root">
+    <div v-if="mode === 'icon'" class="cd-icon-only" :style="{ width }" @click="handleOpen">
+      <span class="flex items-center justify-center" v-if="isSvgMode && currentSelect">
+        <SvgIcon :name="currentSelect" :prefix="svgPrefix" />
+      </span>
+      <Icon :icon="currentSelect || defaultIcon" v-else />
+    </div>
+    <t-input v-else :readonly="readonly" :style="{ width }" :placeholder="mode === 'text' ? placeholder : ''" class="cd-icon-picker" v-model="displayValue" @click="handleOpen">
+      <template #prefixIcon>
+        <span class="cursor-pointer px-2 py-1 flex items-center" v-if="isSvgMode && currentSelect">
+          <SvgIcon :name="currentSelect" :prefix="svgPrefix" />
+        </span>
+        <Icon :icon="currentSelect || defaultIcon" class="cursor-pointer px-2 py-1" v-else />
+      </template>
+    </t-input>
+
+    <t-dialog v-model:visible="visible" header="选择图标" width="940px"   :close-on-esc-keydown="true" :close-on-overlay-click="true" @confirm="handleConfirm" @cancel="handleCancel">
+      <div class="cd-picker-body">
+        <div class="cd-picker-sidebar">
+          <div class="cd-picker-section">
+            <div class="cd-picker-section-title">风格</div>
+            <ul class="cd-picker-cats">
+              <li :class="['cd-picker-cat', styleType === 'outlined' && 'active']" @click="styleType = 'outlined'">描边</li>
+              <li :class="['cd-picker-cat', styleType === 'filled' && 'active']" @click="styleType = 'filled'">填充</li>
+            </ul>
+          </div>
+          <div class="cd-picker-section">
+            <div class="cd-picker-section-title">来源</div>
+            <ul class="cd-picker-cats">
+               <li :class="['cd-picker-cat', sourceType === 'remix' && 'active']" @click="sourceType = 'remix'">Remix</li>
+              <li :class="['cd-picker-cat', sourceType === 'tdesign' && 'active']" @click="sourceType = 'tdesign'">TDesign</li>
+       
+              <li :class="['cd-picker-cat', sourceType === 'custom' && 'active']" @click="sourceType = 'custom'">自定义</li>
+            </ul>
+          </div>
+          <div class="cd-picker-section">
+            <div class="cd-picker-section-title">类别</div>
+            <ul class="cd-picker-cats" style="flex-wrap: wrap;">
+              <li :class="['cd-picker-cat', categoryType === 'all' && 'active']" @click="categoryType = 'all'">全部</li>
+              <li v-for="c in categoryOptions" :key="c" :class="['cd-picker-cat', categoryType === c && 'active']" @click="categoryType = c">{{ c }}</li>
+            </ul>
+          </div>
+        </div>
+        <div class="cd-picker-main">
+          <div class="cd-picker-search">
+            <t-input :placeholder="searchPlaceholder" @input="debounceHandleSearchChange" clearable />
+          </div>
+          <div v-if="getPaginationList.length" class="cd-picker-content">
+            <ul class="cd-picker-grid">
+              <li
+                v-for="icon in getPaginationList"
+                :key="icon"
+                :class="['cd-picker-item', currentSelect === icon && 'active']"
+                @click="handleClick(icon)"
+                :title="icon">
+                <SvgIcon v-if="isSvgMode" :name="icon" :prefix="svgPrefix" />
+                <Icon :icon="icon" v-else />
+              </li>
+            </ul>
+            <div class="cd-picker-pagination" v-if="getTotal >= pageSize">
+              <t-pagination show-less-items size="medium" :page-size="pageSize" :total="getTotal" @change="handlePageChange" />
+            </div>
+          </div>
+          <div v-else class="cd-picker-empty">
+            <t-empty />
+          </div>
+        </div>
+      </div>
+    </t-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { ref, watchEffect, watch, computed } from 'vue';
+import Icon from './Icon.vue';
+import SvgIcon from './SvgIcon.vue';
+import categories from '../data/categories';
+
+const props = defineProps({
+  value: { type: String, default: '' },
+  tdesign: { type: String, default: '' },
+  remixicon: { type: String, default: '' },
+  svg: { type: String, default: '' },
+  width: { type: String, default: '100%' },
+  pageSize: { type: Number, default: 140 },
+  copy: { type: Boolean, default: false },
+  diyIcon: { type: [Array, Object] as PropType<string[] | { prefix: string; icons: string[]; categoryMap?: Record<string, string[]> }> },
+  placeholder: { type: String, default: '选择图标' },
+  searchPlaceholder: { type: String, default: '搜索图标' },
+  readonly: { type: Boolean, default: true },
+  categoryMap: { type: Object as PropType<Record<string, string[]>> },
+  mode: { type: String as PropType<'icon' | 'text'>, default: 'text' },
+});
+
+const emit = defineEmits(['change', 'update:value', 'update:tdesign', 'update:remixicon', 'update:svg']);
+
+// dialog 不需要 attach/placement
+
+const isSvgMode = computed(() => sourceType.value === 'custom');
+const svgPrefix = computed(() => {
+  const d = props.diyIcon as any;
+  return Array.isArray(d) ? 'icon' : (d?.prefix ?? 'icon');
+});
+
+const rawIcons = computed<string[]>(() => {
+  if (sourceType.value === 'custom') {
+    const d = props.diyIcon as any;
+    return Array.isArray(d) ? (d as string[]) : ((d?.icons ?? []) as string[]);
+  }
+  return [] as string[];
+});
+
+const styleType = ref<'outlined' | 'filled'>('outlined');
+const sourceType = ref< 'remix'| 'tdesign' | 'custom'>('remix');
+const categoryType = ref<string>('all');
+
+const customIcons = computed(() => {
+  const d = props.diyIcon as any;
+  if (Array.isArray(d)) return d as string[];
+  return (d?.icons ?? []) as string[];
+});
+
+const currentSelect = ref('');
+const visible = ref(false);
+const page = ref(1);
+const pageSize = computed(() => props.pageSize);
+
+const displayValue = computed({
+  get() {
+    return props.mode === 'text' ? currentSelect.value : '';
+  },
+  set(v: string) {
+    if (props.mode === 'text') currentSelect.value = v || '';
+  },
+});
+
+watchEffect(() => {
+  const bySource = sourceType.value === 'tdesign' ? props.tdesign : sourceType.value === 'remix' ? props.remixicon : props.svg;
+  currentSelect.value = props.value || bySource || '';
+});
+
+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[]>;
+  const d = props.diyIcon as any;
+  if (!Array.isArray(d) && d?.categoryMap) return d.categoryMap as Record<string, string[]>;
+  const map = (categories as any)[sourceType.value] || (categories as any).tdesign;
+  return map as Record<string, string[]>;
+});
+
+const categoryOptions = computed(() => Object.keys(categoryMap.value).filter(k => !k.endsWith('fill')));
+
+
+const filteredIcons = computed(() => {
+  if (sourceType.value === 'custom') {
+    const list = customIcons.value;
+    return searchText.value ? list.filter(i => i.includes(searchText.value)) : list;
+  }
+
+  const useFill = styleType.value === 'filled';
+  const map: any = categoryMap.value;
+  const cats = categoryOptions.value;
+
+  let list: string[] = [];
+  if (categoryType.value === 'all') {
+    for (const cat of cats) {
+      const arr = (useFill ? map[`${cat}fill`] : map[cat]) || map[cat] || [];
+      list = list.concat(arr);
+    }
+  } else {
+    list = ((useFill ? map[`${categoryType.value}fill`] : map[categoryType.value]) || map[categoryType.value] || []) as string[];
+  }
+
+  if (sourceType.value === 'remix') {
+    const suffix = useFill ? '-fill' : '-line';
+    list = list.map(n => (/-line$|-fill$/.test(n) ? n : `${n}${suffix}`));
+  }
+
+  return searchText.value ? list.filter(i => i.includes(searchText.value)) : list;
+});
+
+const getTotal = computed(() => filteredIcons.value.length);
+const getPaginationList = computed(() => {
+  const start = (page.value - 1) * pageSize.value;
+  return filteredIcons.value.slice(start, start + pageSize.value);
+});
+
+function handlePageChange(p: number | { current: number }) {
+  const next = typeof p === 'number' ? p : (p as any).current;
+  page.value = next || 1;
+}
+
+const defaultIcon = 'ri-apps-line';
+
+function handleClick(icon: string) {
+  currentSelect.value = icon;
+  if (props.copy && navigator?.clipboard) {
+    navigator.clipboard.writeText(icon).catch(() => {});
+  }
+  if (sourceType.value === 'tdesign') emit('update:tdesign', icon);
+  else if (sourceType.value === 'remix') emit('update:remixicon', icon);
+  else emit('update:svg', icon);
+}
+
+let timer: any = null;
+function debounceHandleSearchChange(e: any) {
+  const value = typeof e === 'string' ? e : (e?.target?.value || e?.detail?.value || '');
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => handleSearch(value), 100);
+}
+
+function handleSearch(value: string) {
+  searchText.value = value || '';
+  page.value = 1;
+}
+
+function handleOpen() {
+  visible.value = true;
+}
+
+function handleConfirm() {
+  visible.value = false;
+}
+
+function handleCancel() {
+  visible.value = false;
+}
+
+</script>
+<style lang="scss">
+.cd-icon-picker {
+  &-popover {
+    .scrollbar {
+      height: 220px;
+      overflow: auto;
+    }
+  }
+}
+
+.cd-picker-body { display: flex; gap: 12px; padding: 12px; }
+.cd-picker-sidebar { width: 240px; border-right: 1px solid #eee; padding-right: 12px; }
+.cd-picker-section { margin-bottom: 12px; }
+.cd-picker-section-title { font-size: 12px; color: #999; margin-bottom: 6px; }
+.cd-picker-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 4px; }
+.cd-picker-cat { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
+.cd-picker-cat.active { background: #f2f3f5; color: #0052d9; }
+
+.cd-icon-only { display: flex; align-items: center; justify-content: center; border: 1px solid #e5e5e5; border-radius: 6px; padding: 6px; cursor: pointer; }
+.cd-icon-only:hover { border-color: var(--td-brand-color, #0052d9); }
+
+.cd-picker-main { width: 620px; }
+.cd-picker-search { margin-bottom: 8px; }
+.cd-picker-content { border-top: 1px solid #eee; }
+.cd-picker-grid { list-style: none; margin: 0; padding: 10px 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; }
+.cd-picker-item { display: flex; width: 30px; align-items: center; justify-content: center; border: 1px solid #e5e5e5; border-radius: 6px; padding: 8px; cursor: pointer; }
+.cd-picker-item.active { border-color: var(--td-brand-color, #0052d9); }
+.cd-picker-item:hover { border-color: var(--td-brand-color, #0052d9); }
+.cd-picker-pagination { display: flex; justify-content: center; padding: 8px; }
+.cd-picker-empty { padding: 24px; }
+</style>

package/src/SvgIcon.vue

@@ -0,0 +1,57 @@
+<template>
+  <svg :class="['cd-svg-icon', $attrs.class, spin && 'svg-icon-spin']" :style="getStyle" aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+
+
+  export default defineComponent({
+    name: 'SvgIcon',
+    props: {
+      prefix: {
+        type: String,
+        default: 'icon',
+      },
+      name: {
+        type: String,
+        required: true,
+      },
+      size: {
+        type: [Number, String],
+        default: 16,
+      },
+      spin: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+
+      const getStyle = computed((): Record<string, any> => {
+        const { size } = props;
+        let s = `${size}`;
+        s = `${s.replace('px', '')}px`;
+        return {
+          width: s,
+          height: s,
+        };
+      });
+      return { symbolId, getStyle };
+    },
+  });
+</script>
+<style lang="scss" scoped>
+  .cd-svg-icon {
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: -0.15em;
+    fill: currentColor;
+  }
+
+  .svg-icon-spin {
+    animation: loadingCircle 1s infinite linear;
+  }
+</style>