<template>
    <svg :style="iconStyle" aria-hidden="true" :fill="iconColor">
        <use :xlink:href="symbolId" />
    </svg>
</template>

<script lang="ts" setup>
import { computed, CSSProperties } from 'vue';

interface SvgProps {
    name: string; // 图标名称 ==> 必传
    prefix?: string, // 图标的前缀 ==> 非必传（默认为"icon"）
    iconStyle?: CSSProperties, // 图标的样式 ==> 非必传
    iconColor?: string
}

// 接收父组件参数并设置默认值
// withDefaults 作用是给defineProps绑定默认值的api
const props = withDefaults(defineProps<SvgProps>(), {
    prefix: 'icon',
    iconStyle: () => ({ width: '23px', height: '23px' }),
    iconColor: 'pink'
})

const symbolId = computed(() => `#${props.prefix}-${props.name}`)

</script>