动态的图标运用

第一步：先建立DynamicIcon.vue

代码如下

<template>
  <component
    :is="iconComponent"
    style="margin-right: 10px"
  />
</template>

<script setup>
import {
  HomeOutlined, BarsOutlined, CalendarOutlined, ProjectOutlined, CaretDownOutlined, DownOutlined, UpOutlined, WechatOutlined, IdcardOutlined, PhoneOutlined,
  SearchOutlined, FireOutlined, QuestionCircleOutlined, DoubleRightOutlined
} from '@ant-design/icons-vue';

const props = defineProps({
  type: {
    type: String,
    required: true
  }
});

const iconComponent = computed(() => {
  switch (props.type) {
    case 'HomeOutlined':
      return HomeOutlined;
    case 'BarsOutlined':
      return BarsOutlined;
    case 'CalendarOutlined':
      return CalendarOutlined;
    case 'ProjectOutlined':
      return ProjectOutlined;
    case 'CaretDownOutlined':
      return CaretDownOutlined;
    case 'DownOutlined':
      return DownOutlined;
    case 'UpOutlined':
      return UpOutlined;
    case 'wechat':
      return WechatOutlined;
    case 'idcard':
      return IdcardOutlined;
    case 'phone':
      return PhoneOutlined;
    case 'search':
      return SearchOutlined;
    case 'fire':
      return FireOutlined;
    case 'question':
      return QuestionCircleOutlined;
    case 'right':
      return DoubleRightOutlined;
    default:
      return HomeOutlined;
  }
});
</script>

其中component应该是vue的基础组件,is绑定动态的数据，只要右边是一个数据就行了，iconComponent在这就是数据，右边是一个函数，根据父组件传递的参数return不同的icon值

在别的页面运用时