<template>
    <component :is="iconComponent"/>
</template>

<script>
export default {
    props: {
        name: {
            type: String,
            required: true
        }
    },
    data(){
        return {
            iconComponent: null
        }
    },
    methods: {
        async importSvgFile(filename){
            if (typeof filename === 'string' && filename.length){
                await import(`!vue!svg-to-vue!path/to/assets/folder/${filename}.svg`)
                    .then((module) => {
                        if (module && module.default){
                            this.iconComponent = module.default
                        }
                    }).catch((err) => {
                        console.error(`Ikon dengan nama ${filename} tidak dapat ditemukan.`)
                    })
            }
        }
    },
    watch: {
        name: {
            immediate: true,
            handler: 'importSvgFile'
        }
    }
}
</script>