Vue3 antdv 如何动态渲染 button中的 icons-vue 图标

在Vue3中，结合Ant Design Vue (antdv) 和 Icons-Vue 动态渲染按钮中的图标，你可以通过数据绑定和条件渲染来实现。首先，你需要确保已经安装了`icons-vue`和`vue-class-component`（如果还没安装，可以使用npm或yarn添加它们）。

假设你有一个数组存储了按钮的状态和对应的图标名称：

<template>
  <el-button v-for="item in buttons" :key="item.id">
    <v-icon :name="item.icon" /> {{ item.label }}
  </el-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElButton, VIcon } from 'ant-design-vue';
import { IconName } from 'icons-vue';

export default defineComponent({
  components: {
    ElButton,
    VIcon
  },
  data() {
    return {
      buttons: [
        { id: 1, label: 'Button 1', icon: 'icon-setting' },
        { id: 2, label: 'Button 2', icon: 'icon-help' },
        // 更多按钮...
      ]
    };
  }
});
</script>

在这个例子中，我们遍历`buttons`数组，对于每个对象，根据`icon`属性动态地插入`VIcon`组件，并设置其`name`属性为相应的图标名。当状态改变时，只要更新`buttons`数组，视图就会自动更新显示对应的新图标。