// 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 图标数据映射（Lucide 风格，替换原 emoji）
getSvgPath(name) {
const s = '',
'arrow-up-right': s + '',
'chevron-left': s + '',
'search': s + '',
'heart': s + '',
'user': s + '',
'smartphone': s + '',
'map-pin': s + '',
'home': s + '',
'star': s + '',
'message-circle': s + '',
'package': s + '',
'book-open': s + '',
'lightbulb': s + '',
'handshake': s + '',
'rocket': s + '',
'trophy': s + '',
'refresh-cw': s + '',
'shield': s + '',
'wallet': s + '',
'wrench': s + '',
'camera': s + '',
'phone': s + '',
'clipboard': s + '',
'megaphone': s + '',
'image': s + '',
'gift': s + '',
'lock': s + '',
'sparkles': s + '',
'save': s + '',
'globe': s + '',
'users': s + '',
'gamepad': s + '',
'check': s + '',
'trash-2': s + '',
'clock': s + '',
'plus': s + '',
'briefcase': s + '',
'target': s + '',
'rotate-ccw': s + '',
'corner-down-left': s + '',
'folder': s + '',
'bar-chart': s + '',
'link': s + ''
}
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: ''
})
}
}
}
})