feiniao-be-data/src/layout/MenuIcon.vue

<template>
  <img class="menu-icon" :src="iconSrc" :alt="name" />
</template>

<script setup>
import { computed } from "vue";
import deviceIcon from "@/assets/layout/device.png";
import leafIcon from "@/assets/layout/leaf.png";
import personIcon from "@/assets/layout/person.png";

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
});

const iconMap = {
  device: deviceIcon,
  planting: leafIcon,
  personnel: personIcon,
};

const iconSrc = computed(() => iconMap[props.name] || deviceIcon);
</script>

<style scoped>
.menu-icon {
  display: block;
  width: 18px;
  height: 22px;
  object-fit: contain;
}
</style>