前言

如题，在vue3中进行按需加载来动态的渲染icon图标;

在线案例：https://stackblitz.com/edit/9ufmeo?file=src%2Fdemo.vue

内容

<template>
  <t-space direction="vertical">
    <t-space break-line v-for="(item, index) in iconList" :key="index">
      <component :is="iconList[index]" />
    </t-space>
    <t-space break-line v-for="(item, index) in iconConfig" :key="index">
      <component :is="iconObject[item.icon]" />
    </t-space>
  </t-space>
</template>
<script setup>
import {
    Download1Icon, TabIcon } from 'tdesign-icons-vue-next';
import {
    markRaw, reactive } from 'vue';

const iconList = reactive([markRaw(Download1Icon), markRaw(TabIcon)]);
const iconConfig = [{
    icon: 'Download1Icon' }, {
    icon: 'TabIcon' }];
const iconObject = reactive({
   
  Download1Icon: markRaw(Download1Icon),
  TabIcon: markRaw(TabIcon),
});
</script>