<template>
  <span class="iii-icon">
    <img :src="imageUrl" alt="" />
  </span>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { icons } from './images';

  const props = defineProps({ type: { default: '' } });
  const imageUrl = computed(() => icons[props.type]);
</script>

<style scoped lang="scss">
  .iii-icon {
    width: 1em;
    height: 1em;
    display: inline-block;

    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
  }
</style>
