elementui plus 图标循环加载

今天在学习vue3时，在用Element Plus布局页面时，遇到了一个图标循环加载的问题。开始不知道如何渲染图标，以为像ElementUI 一样可以通过class进行渲染图标，发现无法使用，让后我发现引用的图标是组件，组件的话就可以使用进行渲染了.

在这里插入图片描述
官方文档中图标的使用方法：

<!-- 使用 el-icon 标签来包裹 SVG 图标 -->
<template><div><el-icon :size="size" :color="color"><edit /></el-icon><!-- 也可以直接使用图标标签，无需父标签包裹 --><edit /></div>
</template>

按需引入循环渲染

<template>
<div class="user-box"><!-- 使用循环渲染 --><div v-for="item in userTab" :key="item.label" class="user-box-item"><el-icon><component :is="item.icon"/></el-icon><!-- <component :is="item.icon"/> --><span>{{ item.label }}</span></div><!-- 正常使用方式--><!-- <div class="user-box-item"><el-icon><setting /></el-icon><span>稿件管理</span></div><div class="user-box-item"><el-icon><goods /></el-icon><span>浪币钱包</span></div><div class="user-box-item"><el-icon><back /></el-icon><span>退出</span></div>-->
</div>
</template><script lang="ts" setup>
import {User,Setting,Goods,Back,
} from '@element-plus/icons-vue'interface UserTabType {label: string,icon: any,path: string,value: string,
}const userTab = reactive<Array<UserTabType>>([{label: '个人中心',icon: User,path: '/user',value: '',},{label: '稿件管理',icon: Setting,path: '',value: '',},{label: '浪币钱包',icon: Goods,path: '',value: '',},{label: '退出',icon: Back,path: '',value: '',},
])
</script>

全局引用（比如icon是后端返回的一个字符串的形式）

// 1.首先需要注册所有图标
// 官网 
// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
// 2.使用
<el-icon><component is="User" /> // 这样就可以通过字符串的形式直接使用图标了
</el-icon>