refactor: 自动导入修改和项目重构优化

Former-commit-id: 100ab2e0092d96b17146163759aef897e5c14fbd

src/components/SvgIcon/index.vue

@@ -9,14 +9,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
 const props = defineProps({
   prefix: {
     type: String,
     default: 'icon'
   },
-  iconClass: {
+  iconName: {
     type: String,
     required: false
   },
@@ -29,12 +27,15 @@ const props = defineProps({
   }
 });
 
-const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
+const symbolId = computed(() => `#${props.prefix}-${props.iconName}`);
 </script>
 
 <style scoped>
 .svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
+  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
   overflow: hidden;
-  fill: currentColor;
 }
 </style>