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 :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'，
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 : 1 em ; // 设置默认宽度为1em
height : 1 em ; // 设置默认高度为1em
fill : currentColor ; // 填充颜色为当前文本颜色
overflow : hidden ; // 隐藏溢出内容
}
< / style >
