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样式进行控制!

相关推荐
李剑一2 分钟前
别再用HTTP/1这个老古董了,两招帮你升级HTTP/2
前端·架构
t2007189 分钟前
4.27 react第一天
前端·react.js·前端框架
飞天牛牛13 分钟前
前端小知识:彻底搞懂 CSS 的 `position: sticky`!
前端
大名人儿24 分钟前
【JS事件循环机制event-loop】
javascript·事件循环·宏任务·微任务·event-loop
vim怎么退出24 分钟前
46.二叉树展开为链表
前端·leetcode
薛定谔的猫231 分钟前
Composition API的深入理解与最佳实践
前端·vue.js
NaN_37233 分钟前
新手教程-使用 Android Studio 搭建 React Native 项目开发环境
前端
天天扭码42 分钟前
JavaScript 中 apply 和 call 方法的区别与应用场景
前端·javascript·面试
parade岁月1 小时前
TypeScript 全局类型声明文件规范性分析与归纳
前端·vue.js·typescript
溪i1 小时前
react-spring/web + children not defined
前端·spring·react.js