前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3——tdesign-vue-next如何按需加载动态渲染ICON

Vue3——tdesign-vue-next如何按需加载动态渲染ICON

原创
作者头像
思索
发布2024-06-25 08:20:39
850
发布2024-06-25 08:20:39

前言

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

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

内容

代码语言:javascript
复制
<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>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 内容
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档