antdesign 动态引入icon

第一步: 创建一个icon.js文件,写一个自定义组件

// 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]);
};

第二步: 视图中引入即可
注意: 引入的icon必须为大写

<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>

如果是在路由中设置meta属性,也需要遵守设置成大写