[重大更新] 整体主题样式重写 改为卡片式布局 样式更企业化

src/components/SvgIcon/index.vue

@@ -1,24 +1,33 @@
 <template>
-  <svg :class="svgClass" aria-hidden="true">
+  <Icon v-if="isIconify" :icon="normalizedIcon" :class="svgClass" :style="iconStyle" aria-hidden="true" />
+  <svg v-else :class="svgClass" aria-hidden="true" :style="iconStyle">
     <use :xlink:href="iconName" :fill="color" />
   </svg>
 </template>
 
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
   iconClass: propTypes.string.isRequired,
   className: propTypes.string.def(''),
-  color: propTypes.string.def('')
+  color: propTypes.string.def(''),
+  size: propTypes.string.def('')
 });
-const iconName = computed(() => `#icon-${props.iconClass}`);
+const normalizedIcon = computed(() => props.iconClass.replace(/^i-/, ''));
+const isIconify = computed(() => normalizedIcon.value.includes(':'));
+const iconName = computed(() => `#icon-${normalizedIcon.value}`);
 const svgClass = computed(() => {
   if (props.className) {
     return `svg-icon ${props.className}`;
   }
   return 'svg-icon';
 });
+const iconStyle = computed(() => ({
+  color: props.color || undefined,
+  fontSize: props.size || undefined
+}));
 </script>
 
 <style lang="scss" scoped>
@@ -36,5 +45,6 @@ const svgClass = computed(() => {
   position: relative;
   fill: currentColor;
   vertical-align: -2px;
+  flex-shrink: 0;
 }
 </style>