<template>
    <!-- 直接使用通过名称解析的图标组件 -->
    <component :is="iconComponent" v-if="iconComponent" />
</template>

<script>
import { defineComponent, ref, watch } from 'vue';
import * as Icon from '@ant-design/icons-vue';

export default defineComponent({
    name: 'PaasIcon',
    props: {
        icon: {
            type: String,
            default: '',
        },
    },
    setup(props) {
        const iconComponent = ref(null);

        watch(() => props.icon, (newIcon) => {
            iconComponent.value = Icon[newIcon];
        }, { immediate: true });

        return {
            iconComponent,
        };
    },
});
</script>
