0
点赞
收藏
分享

微信扫一扫

Elementui-Plus动态渲染图标icon

玉新行者 2024-08-24 阅读 30

一、在main.ts引入相关依赖:

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

二、使用 component 组件进行动态加载

<component class="icons" :is="icon"></component>

其中 icon变量的的值可以是 DataAnalysis、User等,可在页面进行复制:图标地址

三、  修改样式

在vue页面增加样式:

svg {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  padding-top: -1px;
}

处理后,即可通过icon值进行动态渲染图标,图标大小可以通过svg样式进行控制!

举报

相关推荐

0 条评论