const svgToDataUrl = (svg) => {
const encoded = encodeURIComponent(svg)
.replace(/'/g, '%27')
.replace(/"/g, '%22');
return `data:image/svg+xml,${encoded}`;
};
const ICONS = {
'chevron-left': '',
'chevron-right': '',
'settings': '',
'crown': '',
'gift': '',
'diamond': '',
'clock': '',
'wallet': '',
'sprout': '',
'banknote': '',
'shopping-bag': '',
'users': '',
'backpack': '',
'share': '',
'briefcase': '',
'headphones': '',
'package': '',
'logout': '',
'copy': '',
'image': '',
'share-2': '',
'scan': '',
'camera': '',
'clipboard': '',
'trending-up': '',
'map-pin': '',
'heart': '',
'heart-filled': '',
'flame': '',
'flame-hot': ''
};
Component({
properties: {
name: { type: String, value: '' },
size: { type: Number, value: 24 },
color: { type: String, value: '#111827' }
},
data: {
style: ''
},
observers: {
'name,size,color': function(name, size, color) {
const raw = ICONS[name] || '';
const svg = raw.replace(/CURRENT/g, color || '#111827');
const url = svg ? svgToDataUrl(svg) : '';
const s = Number(size || 24);
this.setData({
style: `width:${s}rpx;height:${s}rpx;${url ? `background-image:url('${url}');` : ''}`
});
}
}
});