message: perf(icon): icon and SvgIcon integration
diff: <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';
  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,
  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 = '';
  el.textContent = '';
  el.appendChild(span);
  }
  - }
  };
  const getWrapStyle = computed(
  onMounted(update);
  - return { elRef, getWrapStyle };
  + return { elRef, getWrapStyle, isSvgIcon, getSvgIcon };
  },
  });
  </script>
  