perf(icon): icon and SvgIcon integration

src/components/Icon/src/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <span ref="elRef" :class="[$attrs.class, 'app-iconify anticon']" :style="getWrapStyle"></span>
+  <SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class]" />
+  <span
+    v-else
+    ref="elRef"
+    :class="[$attrs.class, 'app-iconify anticon']"
+    :style="getWrapStyle"
+  ></span>
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
@@ -13,12 +19,16 @@
     computed,
     CSSProperties,
   } from 'vue';
+
+  import SvgIcon from './SvgIcon.vue';
   import Iconify from '@purge-icons/generated';
   import { isString } from '/@/utils/is';
   import { propTypes } from '/@/utils/propTypes';
 
+  const SVG_END_WITH_FLAG = '|svg';
   export default defineComponent({
     name: 'GIcon',
+    components: { SvgIcon },
     props: {
       // icon name
       icon: propTypes.string,
@@ -34,17 +44,20 @@
     setup(props) {
       const elRef = ref<ElRef>(null);
 
-      const getIconRef = computed(() => {
-        const { icon, prefix } = props;
-        return `${prefix ? prefix + ':' : ''}${icon}`;
-      });
+      const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
+      const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, ''));
+      const getIconRef = computed(() => `${props.prefix ? props.prefix + ':' : ''}${props.icon}`);
 
       const update = async () => {
+        if (unref(isSvgIcon)) return;
+
         const el = unref(elRef);
-        if (el) {
+        if (!el) return;
+
         await nextTick();
         const icon = unref(getIconRef);
         if (!icon) return;
+
         const svg = Iconify.renderSVG(icon, {});
         if (svg) {
           el.textContent = '';
@@ -56,7 +69,6 @@
           el.textContent = '';
           el.appendChild(span);
         }
-        }
       };
 
       const getWrapStyle = computed(
@@ -78,7 +90,7 @@
 
       onMounted(update);
 
-      return { elRef, getWrapStyle };
+      return { elRef, getWrapStyle, isSvgIcon, getSvgIcon };
     },
   });
 </script>