Elementui-Plus动态渲染图标icon

一、在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样式进行控制！