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

<template>
	<image class="u-icon-img" :src="resolvedSrc" :style="{ width: (size??0) + 'px', height: (size??0) + '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 != null) return this.src;
				if (this.name != null) {
					const key = (this.active == true ? `${this.name}-active` : this.name) as string;
					const iconFromKey = iconMap[key] as string | null;
					if (iconFromKey != null) return iconFromKey;
					const iconFromName = iconMap[this.name] as string | null;
					if (iconFromName != null) return iconFromName;
					return '';
				}
				return '';
			}
		},
		methods: {
			handleClick() {
				this.$emit('click');
			}
		}
	};
</script>

<style>
	.u-icon-img {
		/* display: block; */
	}
</style>