Quantity-Creation-Management-System/src/components/cIcon/cIcon.vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import { getAssetsImageUrl } from '@/utils/common'
import { loadResource } from '@/utils/resource'

const props = withDefaults(
  defineProps<{
    src: string
    size?: number
  }>(),
  {
    size: 20,
  },
)

const iconSrc = ref<string>()

watch(
  () => props.src,
  async (newSrc: string) => {
    const assetUrl = getAssetsImageUrl('icon' + newSrc)
    const blobUrl = await loadResource(assetUrl)
    iconSrc.value = blobUrl
  },
  { deep: true, immediate: true },
)
</script>

<template>
  <div :style="{ width: `${size}px`, height: `${size}px` }">
    <el-image
      v-bind="{ ...$attrs }"
      :fit="$attrs['fit'] ? $attrs['fit'] : 'fill'"
      :src="iconSrc"
      class="cIcon"
    ></el-image>
  </div>
</template>

<style scoped>
.cIcon {
  display: flex;
  align-items: center;
}
</style>