<template>
  <svg class="dz-icon" aria-hidden="true" :fill="fill" :style="styles" @click="clickIcon">
    <use :xlink:href="name"></use>
  </svg>
</template>

<!-- <script lang="ts">
export default {
    name: "DzIcon",
};
</script> -->

<script lang="ts" setup name="DzIcon">
import {computed} from 'vue'
import './icon/iconfont.css' // 组件内置iconfont
import "./icon/iconfont.js"

const props = withDefaults(defineProps<{
  name: string 
  fill?: string
  size?: number
}>(),
{
  fill:"#5c6b77",
  size: 18
})

const styles = computed(() => {
  return props.size ? {
    width: `${props.size}px`,
    height: `${props.size}px`,
  } : {};
})

const emit = defineEmits(['click'])

const clickIcon = () => {
  emit('click')
}
</script>

<style scoped lang="less">
.dz-icon {
  width: 30px;
  height: 30px;
}
</style>
