perf: perf component

src/components/Icon/index.tsx

@@ -1,32 +1,35 @@
+import './index.less';
+
 import type { PropType } from 'vue';
-import { defineComponent, ref, watch, onMounted, nextTick, unref, computed } from 'vue';
+import {
+  defineComponent,
+  ref,
+  watch,
+  onMounted,
+  nextTick,
+  unref,
+  computed,
+  CSSProperties,
+} from 'vue';
 import Iconify from '@purge-icons/generated';
 import { isString } from '/@/utils/is';
-import './index.less';
+import { propTypes } from '/@/utils/propTypes';
 export default defineComponent({
   name: 'GIcon',
   props: {
     // icon name
-    icon: {
-      type: String as PropType<string>,
-      required: true,
-    },
+    icon: propTypes.string,
     // icon color
-    color: {
-      type: String as PropType<string>,
-    },
+    color: propTypes.string,
     // icon size
     size: {
       type: [String, Number] as PropType<string | number>,
       default: 16,
     },
-    prefix: {
-      type: String as PropType<string>,
-      default: '',
-    },
+    prefix: propTypes.string.def(''),
   },
   setup(props, { attrs }) {
-    const elRef = ref<Nullable<HTMLElement>>(null);
+    const elRef = ref<ElRef>(null);
 
     const getIconRef = computed(() => {
       const { icon, prefix } = props;
@@ -54,18 +57,20 @@ export default defineComponent({
       }
     };
 
-    const wrapStyleRef = computed((): any => {
-      const { size, color } = props;
-      let fs = size;
-      if (isString(size)) {
-        fs = parseInt(size, 10);
+    const wrapStyleRef = computed(
+      (): CSSProperties => {
+        const { size, color } = props;
+        let fs = size;
+        if (isString(size)) {
+          fs = parseInt(size, 10);
+        }
+        return {
+          fontSize: `${fs}px`,
+          color,
+          display: 'inline-flex',
+        };
       }
-      return {
-        fontSize: `${fs}px`,
-        color,
-        display: 'inline-flex',
-      };
-    });
+    );
 
     watch(() => props.icon, update, { flush: 'post' });