cd-icon-picker 1.2.1 → 1.2.2

package/package.json

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

package/src/Icon.vue

@@ -1,5 +1,6 @@
 <template>
-  <SvgIcon v-if="isSvgIcon" :size="String(size)" :name="getSvgIcon" :class="[$attrs.class, 'cd-icon']" :spin="spin" />
+  <img v-if="isImageUrl" :src="icon" :style="getImageStyle" :class="[$attrs.class, 'cd-icon']" />
+  <SvgIcon v-else-if="isSvgIcon" :size="String(size)" :name="getSvgIcon" :class="[$attrs.class, 'cd-icon']" :spin="spin" />
   <span v-else-if="isCompanyIcon" v-html="getCompanySvg" :class="['cd-icon', $attrs.class, spin && 'svg-icon-spin']" :style="getStyle"></span>
   <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="String(size)" :color="color" :spin="spin" :class="[$attrs.class, 'cd-icon']" />
@@ -36,6 +37,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const isImageUrl = computed(() => /^https?:\/\/.+\.(png|jpg|jpeg|gif|svg|webp)/i.test(props.icon || ''));
     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-'));
@@ -57,7 +59,15 @@ export default defineComponent({
         color: props.color || undefined,
       };
     });
-    return { isSvgIcon, getSvgIcon, isRemixIcon, getStyle, isCompanyIcon, getCompanySvg };
+    const getImageStyle = computed((): Record<string, any> => {
+      const s = `${String(props.size).replace('px', '')}px`;
+      return {
+        width: s,
+        height: s,
+        objectFit: 'contain',
+      };
+    });
+    return { isImageUrl, isSvgIcon, getSvgIcon, isRemixIcon, getStyle, isCompanyIcon, getCompanySvg, getImageStyle };
   },
 });
 </script>

package/src/IconPicker.vue

@@ -62,6 +62,13 @@
           <div class="cd-picker-search">
             <t-input :placeholder="searchPlaceholder" @input="debounceHandleSearchChange" clearable />
           </div>
+          <div v-if="sourceType === 'custom'" class="cd-picker-custom-url" style="padding: 12px; border-bottom: 1px solid #eee;">
+            <t-input v-model="customImageUrl" placeholder="输入图片URL (https://...)" clearable>
+              <template #suffix>
+                <t-button size="small" @click="handleAddCustomImage">添加</t-button>
+              </template>
+            </t-input>
+          </div>
           <div v-if="getPaginationList.length" class="cd-picker-content">
             <ul class="cd-picker-grid">
               <li
@@ -141,8 +148,8 @@ 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 baseIcons = Array.isArray(d) ? (d as string[]) : ((d?.icons ?? []) as string[]);
+  return [...baseIcons, ...customImageList.value];
 });
 
 const currentSelect = ref('');
@@ -152,6 +159,8 @@ const pageSize = computed(() => props.pageSize);
 const color = ref(props.color);
 const colorPickerVisible = ref(false);
 const presetColors = ['#000000', '#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#34495e'];
+const customImageUrl = ref('');
+const customImageList = ref<string[]>([]);
 
 const displayValue = computed({
   get() {
@@ -284,7 +293,7 @@ function handleConfirm() {
 
   emit('update:value', icon);
   emit('update:color', color.value);
-  emit('change', sourceType.value as any, icon as any);
+  emit('change', sourceType.value as any, icon as any, color.value);
 }
 
 function handleCancel() {
@@ -296,6 +305,20 @@ function handleCancel() {
   currentSelect.value = v;
 }
 
+function handleAddCustomImage() {
+  const url = customImageUrl.value.trim();
+  if (!url) return;
+  if (!isImageUrl(url)) {
+    alert('请输入有效的图片 URL');
+    return;
+  }
+  if (!customImageList.value.includes(url)) {
+    customImageList.value.push(url);
+  }
+  currentSelect.value = url;
+  customImageUrl.value = '';
+}
+
 watch(
   () => sourceType.value,
   v => {