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>

效果展示:

相关推荐
coding随想28 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB242 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子10 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录10 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20911 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode11 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript