<script setup lang="ts">
  import { computed } from 'vue'
  
  const props = withDefaults(
    defineProps<{
      prefix?: string
      name: string
      color?: string
      size?: string | number
      thickness?: string | number
    }>(),
    {
      prefix: 'icon',
      color: 'inherit',
      size: '1em',
      thickness: '1'
    }
  )
  
  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
  </script>
  
  <template>
    <svg
      class="icon"
      viewBox="0 0 15 15"
      aria-hidden="true"
      :height="size ? size : undefined"
      :stroke-width="thickness"
    >
      <use
        :href="symbolId"
        :style="{ color }"
      />
    </svg>
  </template>