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>

效果展示:

相关推荐
kk不中嘞1 天前
浅谈前端框架
前端·vue.js·react.js·前端框架
yanlele1 天前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)
前端·javascript·面试
影子信息1 天前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
徐小夕1 天前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
wangbing11251 天前
界面规范8-文字
前端·javascript·html
qczg_wxg1 天前
高阶组件介绍
开发语言·javascript·react native·ecmascript
小菜全1 天前
打包 Uniapp
javascript·vue.js·html5
itslife1 天前
实现 Promise
前端·javascript
一枚前端小能手1 天前
🔥 老板要的功能Webpack没有?手把手教你写个插件解决
前端·javascript·webpack
至善迎风1 天前
使用国内镜像源解决 Electron 安装卡在 postinstall 的问题
前端·javascript·electron