Antdesign dynamically imports icon

Step 1: Create an icon.js file and write a custom component

// ICON.js
import {
    
     createVNode } from 'vue'
import  * as $Icon from '@ant-design/icons-vue'

export const Icon = props => {
    
    
  const {
    
     icon } = props;
  return createVNode($Icon[icon]);
};

Step 2: Just import it in the view
Note: The imported icon must be in uppercase

<template>
 <div>
   <Icon :icon="icon" />
 </div>
</template>
<script>
import {
    
     defineComponent,ref } from 'vue'
import {
    
     Icon } from './icon.js'
export default defineComponent({
    
    
    components:{
    
    
        Icon
    },
    setup(){
    
    
        const icon = ref('DashboardOutlined');
        return {
    
    
          icon
        }
    }
})
</script>

If the meta attribute is set in the route, it also needs to be set to uppercase