<template>
    <!-- SVG元素，使用动态绑定的类名、宽度和高度属性 -->
    <svg :class="getClassName" :width="width" :height="height" aria-hidden="true">
        <!-- 使用xlink:href属性引用外部定义的SVG符号 -->
        <use :xlink:href="getName"></use>
    </svg>
</template>

<script>
export default {
    name: 'icon-svg', // 组件名称为'icon-svg'
    props: {
        name: {
            type: String, // 接收一个字符串类型的'name'属性
            required: true // 'name'属性是必需的
        },
        className: {
            type: String // 接收一个字符串类型的'className'属性
        },
        width: {
            type: String // 接收一个字符串类型的'width'属性
        },
        height: {
            type: String // 接收一个字符串类型的'height'属性
        }
    },
    computed: {
        // 计算属性'getName'，返回拼接后的图标ID
        getName() {
            return `#icon-${this.name}`
        },
        // 计算属性'getClassName'，返回包含多个类名的数组
        getClassName() {
            return [
                'icon-svg', // 基础类名
                `icon-svg__${this.name}`, // 根据'name'属性生成的类名
                this.className && /\S/.test(this.className) ? `${this.className}` : '' // 如果'className'存在且非空，则添加该类名
            ]
        }
    }
}
</script>

<style>
/* 样式定义 */
.icon-svg {
    width: 1em; // 设置默认宽度为1em
    height: 1em; // 设置默认高度为1em
    fill: currentColor; // 填充颜色为当前文本颜色
    overflow: hidden; // 隐藏溢出内容
}
</style>
