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>

效果展示:

相关推荐
青龙摄影4 分钟前
【自动化】学习观看视频内容,无需人为干预
前端·vue.js·elementui
豆华9 分钟前
React 中 为什么多个 JSX 标签需要被一个父元素包裹?
前端·react.js·前端框架
前端熊猫14 分钟前
React第一个项目
前端·javascript·react.js
练习两年半的工程师15 分钟前
使用React和Vite构建一个AirBnb Experiences克隆网站
前端·react.js·前端框架
林太白16 分钟前
❤React-JSX语法认识和使用
前端·react.js·前端框架
女生也可以敲代码18 分钟前
react中如何在一张图片上加一个灰色蒙层,并添加事件?
前端·react.js·前端框架
可别是个可爱鬼20 分钟前
黑马智数Day7
前端·javascript·vue.js
QTX1873034 分钟前
前端基础的讲解-JS(10)
开发语言·前端·javascript
J总裁的小芒果40 分钟前
el-form el-table 前端排序+校验+行编辑
前端·vue.js·elementui