<template>
  <svg ref="mysvg" :class="svgClass" class=" fill-current overflow-hidden" aria-hidden="true" :="$attrs" @click="$emit('clickSvg')">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script lang="ts" setup>
import { withDefaults, defineProps, computed,defineEmits, onMounted,ref } from 'vue';
const props = withDefaults(defineProps<{
  iconClass: string,
  className?: string
}>(), { className: '' })

const iconName = computed(() => {
  return `#icon-${props.iconClass}`
})

const svgClass = computed(() => {
  if (props.className) {
    return 'svg-icon ' + props.className
  } else {
    return 'svg-icon'
  }
})

const emits = defineEmits(['clickSvg'])

const mysvg = ref()
onMounted(()=>{
  if(props.iconClass=='system1'){
    console.dir(mysvg.value)
  }
})
</script>
 