<script setup>
import { computed } from 'vue'

const props = defineProps({
  src: { type: String, required: true },
  size: { type: [Number, String], default: 20 },
  color: { type: String, default: 'currentColor' },
})

const normalizedSize = computed(() => (typeof props.size === "number" ? `${props.size}px` : props.size))
const iconStyle = computed(() => ({
  "--svg-icon-src": `url("${props.src}")`,
  "--svg-icon-size": normalizedSize.value,
  "--svg-icon-color": props.color,
}))
</script>

<template>
  <span class="svgIcon" :style="iconStyle" aria-hidden="true"></span>
</template>

<style scoped>
.svgIcon {
  display: inline-block;
  width: var(--svg-icon-size);
  height: var(--svg-icon-size);
  background-color: var(--svg-icon-color);
  -webkit-mask-image: var(--svg-icon-src);
  mask-image: var(--svg-icon-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex: 0 0 auto;
}
</style>
