<template>
  <svg :class="[prefixCls, $attrs.class, spin && 'svg-icon-spin']" :style="getStyle" aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script lang="ts" setup>

import { useDesign } from '@/hooks/external/useDesign';
import { computed, CSSProperties } from 'vue';


const props = withDefaults(
  defineProps<{
    prefix?: string
    name: string
    size?: number | string,
    spin?: boolean
  }>(),
  {
    prefix: 'icon',
    size: 16,
    spin: false
  }
)

const { prefixCls } = useDesign('svg-icon');
const symbolId = computed(() => `#${props.prefix}-${props.name}`);

const getStyle = computed((): CSSProperties => {
  const { size } = props;
  let s = `${size}`;
  s = `${s.replace('px', '')}px`;
  return {
    width: s,
    height: s,
  };
});
</script> 

<style lang="scss" scoped>
@include thingsKit('svg-icon') {
  display: inline-block;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentColor;
}
</style>