ss_dc_wechat_mini_program/components/icon/index.vue

<template>
  <text 
	    :class="[fontClass, 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
	  },
	  // 图标库：legacy(旧库)/base(基础库)/biz(业务库)
	  // 不传默认使用旧库，兼容现有代码
	  lib: {
	    type: String,
	    default: 'legacy'
	  },
	  // 图标颜色
	  color: {
	    type: String,
	    default: '#000'
	  },
  // 图标大小，单位rpx
  size: {
    type: [Number, String],
    default: 32
  }
});

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

	// 选择字体库class
	const fontClass = computed(() => {
	  if (props.lib === 'base') return 'icon-base'
	  if (props.lib === 'biz') return 'icon-biz'
	  return 'iconfont'
	})

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

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

<style>
/* 引入iconfont样式 */
@import '../../static/iconfont/iconfont.css';
@import '../../static/iconfont/icon-base/iconfont.css';
@import '../../static/iconfont/icon-biz/iconfont.css';
.iconfont,
.icon-base,
.icon-biz{
	  line-height: 1;
	}
</style>