ss_dc_wechat_mini_program/components/icon/index.vue

<template>
  <text 
    :class="['iconfont', iconClass]" 
    :style="{ color: color, fontSize: size + 'rpx',verticalAlign: 'middle'}"
    @click="handleClick"
  ></text>
</template>

<script setup>
/**
 * 图标组件
 * 基于iconfont图标库
 */
import { computed } from 'vue';

// 组件属性定义
const props = defineProps({
  // 图标名称，对应iconfont中的类名，如'icon-home'
  name: {
    type: String,
    required: true
  },
  // 图标颜色
  color: {
    type: String,
    default: '#000'
  },
  // 图标大小，单位rpx
  size: {
    type: [Number, String],
    default: 32
  }
});

// 事件
const emit = defineEmits(['click']);

// 计算完整的图标类名
const iconClass = computed(() => {
  return props.name;
});

// 点击事件处理
const handleClick = (event) => {
  emit('click', event);
};
</script>

<style>

/* 引入iconfont样式 */
@import '../../static/iconfont/iconfont.css';
</style>