vue3中ElementPlus引入下载icon图标不显示透明问题解决教程方法

问题:今天用vue3开发,使用ElementPlus图标引入了但是不显示,是空白透明

解决:

1、在main.js中引入element-plus/icons-vue图标库

复制代码
import * as ElIcons from '@element-plus/icons-vue'; // 引入图标库

2、注册所有图标

复制代码
// 注册所有图标
Object.keys(ElIcons).forEach((key) => {
  app.component(key, ElIcons[key]);
});

或者

复制代码
for (const [key, component] of Object.entries(ElIcons)) {
  app.component(key, component);
}

3、app.use一下

复制代码
app.use(ElementPlus);
4、在需要使用icon图标的页面导入
复制代码
 <el-icon name="el-icon-download" style="margin-right: 4px">
              <Download />
            </el-icon>

效果展示:

相关推荐
J总裁的小芒果6 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
工呈士22 分钟前
CSS in JS:机遇与挑战的思考
javascript·css
至尊童24 分钟前
五个JavaScript 应用技巧
javascript
举个栗子dhy28 分钟前
编辑器、代码块、大模型AI对话中代码复制功能实现
javascript
hyyyyy!29 分钟前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式
六边形66632 分钟前
一文搞懂JavaScript 与 BOM、DOM、ECMAScript、Node.js的用处
前端·javascript·面试
Mars狐狸37 分钟前
你踩过console.log的坑吗?从performace说起
前端·javascript
学习机器不会机器学习2 小时前
深入浅出JavaScript常见设计模式:从原理到实战(2)
开发语言·javascript·设计模式
富能量爆棚2 小时前
如何搭建spark yarn 模式的集群
大数据·javascript·spark
林太白3 小时前
NestJS用户模块CRUD和分页实现
前端·javascript·nestjs