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>

效果展示：