From e95c2a8abe2e7c3d213bf5bfa6b532db9a7e228e Mon Sep 17 00:00:00 2001
From: wyt <1955803161@qq.com>
Date: Wed, 29 Oct 2025 22:07:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=B4=E9=9B=A8=E7=9E=B3=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/SvgIcon/index.vue          | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/aurora-vue/aurora-blog/src/components/SvgIcon/index.vue b/aurora-vue/aurora-blog/src/components/SvgIcon/index.vue
index dc39134..3226ec0 100644
--- a/aurora-vue/aurora-blog/src/components/SvgIcon/index.vue
+++ b/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>
\ No newline at end of file