<template>
    <text class="iconfont" :class="iconClass" :style="iconStyle" @click="handleClick"></text>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    // 图标名称，如：home、user、search
    name: {
        type: String,
        required: true
    },
    // 图标大小（单位：rpx）
    size: {
        type: [String, Number],
        default: 32
    },
    // 图标颜色
    color: {
        type: String,
        default: ''
    },
    // 是否粗体
    bold: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['click'])

// 图标类名
const iconClass = computed(() => {
    const prefix = props.name.startsWith('icon-') ? '' : 'icon-'
    return `${prefix}${props.name}`
})

// 图标样式
const iconStyle = computed(() => {
    const style = {
        fontSize: `${props.size}rpx`
    }
    
    if (props.color) {
        style.color = props.color
    }
    
    if (props.bold) {
        style.fontWeight = 'bold'
    }
    
    return style
})

// 点击事件
const handleClick = (e) => {
    emit('click', e)
}
</script>

<style scoped>
.iconfont {
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}
</style>

