mechanicStore-app/components/u-icon/u-icon.vue

<template>
  <image
    :src="resolvedSrc"
    :style="{ width: size + 'px', height: size + 'px' }"
    mode="aspectFit"
    @click="handleClick"
  />
</template>

<script lang="uts">
  import { iconMap } from '@/common/icon-map';

  export default {
    props: {
      name: String,
      src: String,
      size: Number,
      active: Boolean
    },
    computed: {
      resolvedSrc(): string {
        if (this.src) return this.src;
        if (this.name) {
          const key = this.active ? `${this.name}-active` : this.name;
          return iconMap[key] || iconMap[this.name] || '';
        }
        return '';
      }
    },
    methods: {
      handleClick() {
        this.$emit('click');
      }
    }
  };
</script>

<style>
image {
  display: block;
}
</style>