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

相关推荐
旧识君12 分钟前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
ElasticPDF-新国产PDF编辑器36 分钟前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
吃没吃44 分钟前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam44 分钟前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2761 小时前
Android Retrofit用法详解
前端
鸭梨大大大1 小时前
Spring Web MVC入门
前端·spring·mvc
你的人类朋友1 小时前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
吃没吃1 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2761 小时前
Android Room用法详解
前端
木木黄木木2 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d