You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.4 KiB
45 lines
1.4 KiB
<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>
|