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.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< template >
<!-- SVG 图标容器 ， 添加了 svg - icon 类用于样式设置 ， area - hidden = "true" 用于隐藏无障碍区域 -- >
< svg class = "svg-icon" area -hidden = " true " >
<!-- use 元素用于引用外部 SVG 符号 ， : xlink : href 绑定了动态的图标名称 -- >
< use :xlink:href ="iconName" > < / use >
< / svg >
< / template >
< script setup lang = "ts" >
// 从 Vue 中导入 defineProps 和 computed 函数
import { defineProps , computed } from 'vue'
// 定义组件的属性
const props = defineProps ( {
// icon 属性，类型为字符串，是必填项
icon : {
type : String ,
required : true
} ,
// size 属性，类型可以是数字或字符串，默认值为 16
size : {
type : [ Number , String ] ,
default : 16
}
} )
// 计算属性，根据传入的 icon 属性生成最终的图标名称，格式为 #icon-图标名称
const iconName = computed ( ( ) => {
return ` #icon- ${ props . icon } `
} )
// 计算属性，根据传入的 size 属性生成最终的图标大小，单位为像素
const iconSize = computed ( ( ) => {
return props . size + 'px'
} )
< / script >
< style lang = "scss" scoped >
// 选择器.svg-icon 用于设置 SVG 图标的样式
. svg - icon {
// 设置宽度为 1em
width : 1 em ;
// 设置高度为 1em
height : 1 em ;
// 设置填充颜色为当前文本颜色
fill : currentColor ;
// 设置字体大小为 iconSize 计算属性的值
font - size : v - bind ( iconSize ) ;
}
< / style >
