动态图标常见于菜单这一类的显示区域，通过在后台对于图标的配置可以实现根据实际需求动态显示图标。

那么基于nuxt3框架可以如何实现动态配置并正常显示图标呢？文中就该问题给出详细代码。

nuxt3配合ant-design图标动态显示代码详解

<template>
	<component :is="iconData" />
</template>
<script lang="ts">
  import { defineComponent , ref } from 'vue';
  import { HomeOutlined } from '@ant-design/icons-vue';
	export default defineComponent({ 
    components:{
      HomeOutlined
    },
    setup() {
      const iconData = ref('HomeOutlined')
      return {
        iconData
      }
    }
  })
</script>

代码解析：配置变量iconData的值为HomeOutlined该图标为ant-design中引入，再使用component即可完成对于图标的动态配置及显示。