refactor: custom icon

src/components/custom/CustomIcon.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { renderCustomIcon } from '@/utils/icon'
+
+const props = defineProps({
+  /** 图标名称(图片的文件名) */
+  icon: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: Number,
+    default: 14,
+  },
+  color: {
+    type: String,
+    default: undefined,
+  },
+})
+
+const iconCom = computed(() => renderCustomIcon(props.icon, props))
+</script>
+
+<template>
+  <component :is="iconCom" />
+</template>

src/components/custom/SvgIcon.vue

@@ -0,0 +1,24 @@
+<script setup name="SvgIcon">
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  prefix: {
+    type: String,
+    default: 'icon-custom',
+  },
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+})
+
+const symbolId = computed(() => `#${props.prefix}-${props.icon}`)
+</script>
+
+<template>
+  <svg aria-hidden="true" width="1em" height="1em">
+    <use :xlink:href="symbolId" :fill="color" />
+  </svg>
+</template>