<template>
  <i  :style="getStyle">
    <svg :class="class" aria-hidden="true">
      <use :xlink:href="symbolId" :stroke="color" :fill="color" />
    </svg>
  </i>
</template>

<script setup name="SvgIcon">
  import { computed } from 'vue'
  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: 'transparent',
    },
    size: {
      type: [Number, String],
      default: 10,
    },
    class: {
      type: String,
      default: "w-10 h-10",
    },
  })

  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
  const getStyle = computed(() => {
    const { size } = props
    let s = `${size}`
    s = `${s.replace('px', '')}px`
    return {
      fontSize: s,
    }
  })
</script>

