// components/icon/icon.js
Component({
properties: {
// 图标名称
name: {
type: String,
value: 'share',
observer: 'updateIcon'
},
// 图标大小（rpx）
size: {
type: Number,
value: 48
},
// 图标颜色
color: {
type: String,
value: '#ffffff',
observer: 'updateIcon'
},
// 自定义类名
customClass: {
type: String,
value: ''
},
// 自定义样式
customStyle: {
type: String,
value: ''
}
},
data: {
svgData: ''
},
lifetimes: {
attached() {
this.updateIcon()
}
},
methods: {
// SVG 图标数据映射
getSvgPath(name) {
const svgMap = {
'share': '',
'arrow-up-right': '',
'chevron-left': '',
'search': '',
'heart': ''
}
return svgMap[name] || ''
},
// 更新图标
updateIcon() {
const { name, color } = this.data
let svgString = this.getSvgPath(name)
if (svgString) {
// 替换颜色占位符
svgString = svgString.replace(/COLOR/g, color)
// 转换为 Base64 Data URL
const svgData = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`
this.setData({
svgData: svgData
})
} else {
this.setData({
svgData: ''
})
}
}
}
})