<template>
  <!-- 定义一个 SVG 图标组件 -->
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <!-- 绑定类名和事件监听器 -->
    <use :xlink:href="iconName" /> <!-- 使用指定的图标符号 -->
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon', // 定义组件名称为 SvgIcon
  props: { // 定义组件的属性
    iconClass: { // 图标的类名，必填项
      type: String, // 类型为字符串
      required: true // 必须提供
    },
    className: { // 额外的类名，可选项
      type: String, // 类型为字符串
      default: '' // 默认值为空字符串
    }
  },
  computed: { // 计算属性
    iconName() { // 计算图标的 xlink:href 属性值
      return `#icon-${this.iconClass}` // 拼接成 #icon-className 的格式
    },
    svgClass() { // 计算 SVG 的类名
      if (this.className) { // 如果有额外的类名
        return 'svg-icon ' + this.className // 返回 svg-icon 和额外类名的组合
      } else { // 如果没有额外的类名
        return 'svg-icon' // 只返回 svg-icon
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em; /* 设置宽度为 1em */
  height: 1em; /* 设置高度为 1em */
  vertical-align: -0.15em; /* 设置垂直对齐方式 */
  fill: currentColor; /* 设置填充颜色为当前文字颜色 */
  overflow: hidden; /* 隐藏溢出内容 */
}
</style>
