66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<template>
|
||
<text class="icon" :class="'icon-' + name" :style="iconStyle">{{ iconChar }}</text>
|
||
</template>
|
||
|
||
<script>
|
||
const icons = {
|
||
home: '🏠',
|
||
user: '👤',
|
||
chart: '📊',
|
||
product: '📦',
|
||
add: '+',
|
||
search: '🔍',
|
||
order: '📋',
|
||
edit: '✎',
|
||
check: '✓',
|
||
close: '✕',
|
||
stock: '🏭',
|
||
alert: '⚡',
|
||
in: '↓',
|
||
out: '↑',
|
||
customer: '👥',
|
||
money: '💳',
|
||
logout: '↩',
|
||
right: '›',
|
||
left: '‹',
|
||
down: '⌄',
|
||
lock: '🔐',
|
||
filter: '▼',
|
||
calendar: '📅',
|
||
setting: '⚙',
|
||
wechat: '💬',
|
||
cash: '💵',
|
||
alipay: '💙',
|
||
plus: '📥',
|
||
flow: '📊'
|
||
}
|
||
|
||
export default {
|
||
name: 'Icon',
|
||
props: {
|
||
name: { type: String, required: true },
|
||
size: { type: [Number, String], default: 32 },
|
||
color: { type: String, default: '' }
|
||
},
|
||
computed: {
|
||
iconStyle() {
|
||
const style = {}
|
||
if (this.size) style.fontSize = typeof this.size === 'number' ? `${this.size}rpx` : this.size
|
||
if (this.color) style.color = this.color
|
||
return style
|
||
},
|
||
iconChar() {
|
||
return icons[this.name] || '•'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.icon {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
display: inline-block;
|
||
text-align: center;
|
||
line-height: 1;
|
||
}
|
||
</style> |