吴雨瞳添加了注释

aurora-vue/aurora-blog/src/components/SvgIcon/index.vue

@@ -1,29 +1,41 @@
 <template>
+  <!-- 外部图标容器：当是外部图标时显示，应用外部图标样式并绑定属性 -->
   <div v-if="isExternalClass" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-bind="$attrs" />
+  <!-- SVG图标容器：当不是外部图标时显示，应用对应样式并绑定属性 -->
   <svg v-else :class="svgClass" aria-hidden="true" v-bind="$attrs">
+    <!-- 使用use标签引用对应的SVG图标 -->
     <use :href="iconName" />
   </svg>
 </template>
 
 <script lang="ts">
+// 导入Vue相关工具：组件定义、计算属性
 import { defineComponent, computed } from 'vue'
+// 导入判断是否为外部图标的工具函数
 import { isExternalIcon } from '@/utils/validate'
 
+// 定义SVG图标组件
 export default defineComponent({
   name: 'SvgIcon',
+  // 组件接收的属性
   props: {
+    // 图标类名（必填）
     iconClass: {
       type: String,
       required: true
     },
+    // 自定义类名（可选，默认空）
     className: {
       type: String,
       default: ''
     }
   },
   setup(props) {
+    // 计算属性：判断是否为外部图标
     const isExternalClass = computed(() => isExternalIcon(props.iconClass))
+    // 计算属性：生成图标引用路径（用于内部SVG图标）
     const iconName = computed(() => `#icon-${props.iconClass}`)
+    // 计算属性：生成SVG图标最终类名（合并基础类名和自定义类名）
     const svgClass = computed(() => {
       if (props.className) {
         return 'svg-icon ' + props.className
@@ -31,12 +43,15 @@ export default defineComponent({
         return 'svg-icon'
       }
     })
+    // 计算属性：生成外部图标的样式（用于设置背景遮罩）
     const styleExternalIcon = computed(() => {
       return {
         mask: `url(${props.iconClass}) no-repeat 50% 50%`,
         '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
       }
     })
+
+    // 暴露计算属性供模板使用
     return {
       isExternalClass,
       iconName,
@@ -48,6 +63,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
+/* 基础SVG图标样式：设置尺寸、对齐方式等 */
 .svg-icon {
   width: 1em;
   height: 1em;
@@ -59,9 +75,10 @@ export default defineComponent({
   position: relative;
 }
 
+/* 外部图标样式：设置背景色、遮罩尺寸等 */
 .svg-external-icon {
   background-color: currentColor;
   mask-size: cover !important;
   display: inline-block;
 }
-</style>
+</style>