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.***ponent(key, ElIcons[key]);
});

或者

for (const [key, ***ponent] of Object.entries(ElIcons)) {
  app.***ponent(key, ***ponent);
}

3、app.use一下

app.use(ElementPlus);
4、在需要使用icon图标的页面导入

 <el-icon name="el-icon-download" style="margin-right: 4px">
              <Download />
            </el-icon>

效果展示:

转载请说明出处内容投诉
CSS教程网 » vue3中ElementPlus引入下载icon图标不显示透明问题解决教程方法

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买