阿里图标库引入

components/IconfontIcon/IconfontIcon.vue

@@ -0,0 +1,70 @@
+<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>
+