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>

效果展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/61037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1+X应急响应(网络)系统加固:

系统加固&#xff1a; 数据库的重要性&#xff1a; 数据库面临的风险&#xff1a; 数据库加固&#xff1a; 业务系统加固&#xff1a; 安全设备加固&#xff1a; 网络设备加固&#xff1a;

蓝牙 HFP 协议详解及 Android 实现

文章目录 前言一、什么是蓝牙 HFP 协议&#xff1f;HFP 的核心功能HFP 的核心功能HFP 在 Android 中的典型应用场景 二、HFP 协议的工作流程HFP 的连接流程 三、HFP 在 Android 的实现1. 检查蓝牙适配器状态2. 发现并检测支持 HFP 的设备3. 获取 BluetoothHeadset 服务4. 连接设…

Prometheus面试内容整理-生态系统和集成

Prometheus 作为云原生监控的关键工具之一,拥有广泛的生态系统,并能与多种其他系统和工具集成,从而实现更加全面、灵活的监控方案。Prometheus 的生态系统不仅包括内置的各类组件(如 Alertmanager),还涉及与可视化工具、自动化服务发现平台以及持久化存储的集成。以下是关…

Web导出Excel表格

背景&#xff1a; 1. 后端主导实现 流程&#xff1a;前端调用到导出excel接口 -> 后端返回excel文件流 -> 浏览器会识别并自动下载 场景&#xff1a;大部分场景都有后端来做 2. 前端主导实现 流程&#xff1a;前端获取要导出的数据 -> 常规数据用插件处理成一个e…

【Linux】Github 仓库克隆速度慢/无法克隆的一种解决方法,利用 Gitee 克隆 Github 仓库

Github 经常由于 DNS 域名污染以及其他因素克隆不顺利。 一种办法是修改 hosts sudo gedit /etc/hosts加上一行 XXX.XXX.XXX.XXX github.comXXX 位置的 IP 可以通过网站查询 IP/服务器github.com的信息-站长工具 这种方法比较适合本身可以克隆&#xff0c;但是速度很慢的…

理解反射,学会反射:撬开私有性质(private)的属性与方法

看到这句话的时候证明&#xff1a;此刻你我都在努力 加油陌生人 个人主页&#xff1a;Gu Gu Study专栏&#xff1a;用Java学习数据结构系列喜欢的一句话&#xff1a; 常常会回顾努力的自己&#xff0c;所以要为自己的努力留下足迹喜欢的话可以点个赞谢谢了。作者&#xff1a;小…

函数式编程(4) 纯函数

纯函数&#xff1a;每次调用时结果总是一样 这个函数不纯&#xff1a;返回的值有变化 这个函数不纯:因为使用了全局变量minAge 要让它变成纯函数需要 纯函数的好处 immutability/不变性 如果创建了一个对象 js中的const阻止了重新分配一个对象给book, 而并不能阻止给更改其titl…

【Golang】——Gin 框架中间件详解:从基础到实战

中间件是 Web 应用开发中常见的功能模块&#xff0c;Gin 框架支持自定义和使用内置的中间件&#xff0c;让你在请求到达路由处理函数前进行一系列预处理操作。这篇博客将涵盖中间件的概念、内置中间件的用法、如何编写自定义中间件&#xff0c;以及在实际应用中的一些最佳实践。…

Python爬虫知识体系-----requests-----持续更新

数据科学、数据分析、人工智能必备知识汇总-----Python爬虫-----持续更新&#xff1a;https://blog.csdn.net/grd_java/article/details/140574349 文章目录 一、安装和基本使用1. 安装2. 基本使用3. response常用属性 二、get请求三、post请求四、代理 一、安装和基本使用 1.…

15分钟学 Go 第 56 天:架构设计基本原则

第56天&#xff1a;架构设计基本原则 学习目标 理解和掌握基本的架构设计原则&#xff0c;以提升软件系统的可维护性、可扩展性和可重用性。 内容提纲 架构设计原则概述常见架构设计原则 单一职责原则 (SRP)开放/封闭原则 (OCP)里氏替换原则 (LSP)接口分离原则 (ISP)依赖反…

【B+树特点】

B树的特点 B树是B树的一种变体&#xff0c;广泛用于数据库系统和文件系统中&#xff0c;特别是在索引结构中。B树在B树的基础上进行了优化&#xff0c;主要在数据存储和查询效率上有所提升。以下是B树的主要特点&#xff1a; 1. 所有数据存储在叶子节点 与B树不同&#xff0…

高翔【自动驾驶与机器人中的SLAM技术】学习笔记(十三)图优化SLAM的本质

一、直白解释slam与图优化的结合 我从b站上学习理解的这个概念。 视频的大概位置是1个小时以后&#xff0c;在第75min到80min之间。图优化SLAM是怎么一回事。 slam本身是有运动方程的&#xff0c;也就是运动状态递推方程&#xff0c;也就是预测过程。通过t1时刻&#xff0c…

PyCharm2024.2.4安装

一、官网下载 1.从下面的链接点进去 PyCharm: The Python IDE for data science and web development by JetBrains 2.进入官网后&#xff0c;下载pycharm安装包 3.点击下载能适配你系统的安装包 4.安装包下载完成 二、安装 1.下载完成后&#xff0c;打开点击右键&#xff…

WebSocket简易聊天室实现(有详细解释)

完整代码 Arata08/online-chat-demo 服务端: 1.编写配置类&#xff0c;扫描有 ServerEndpoint 注解的 Bean import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.s…

Vue 3 中的原生事件监听与组件事件处理详解

Vue 3 中的原生事件监听与组件事件处理完全指南 在 Vue 3 中&#xff0c;事件监听和事件处理是组件交互中的关键部分。Vue 提供了一套简单而强大的事件处理机制&#xff0c;可以方便地监听 DOM 原生事件和组件自定义事件。本篇文章将详细介绍 Vue 3 中事件的使用&#xff0c;包…

解决Xeyes: Error can‘t open display,远程X无法连通问题。

一、问题分析 提前申明&#xff1a; 本次实验使用REHL 8 进行操作&#xff01; 客户机 A 为X-Client &#xff0c;即远程X的客户端。 服务机 B 为X-Server&#xff0c;即远程X的服务端。 问题的所有操作均在已经配置好Xorg的前提下进行的&#xff0c;不知道不配置会有什么影响&…

19.UE5道具掉落

2-21 道具掉落&#xff0c;回血、回蓝、升级提升伤害_哔哩哔哩_bilibili 目录 1.道具的创建&#xff0c;道具功能的实现 2.随机掉落 1.道具的创建&#xff0c;道具功能的实现 新建Actor蓝图&#xff0c;并命名为道具总类&#xff0c;添加一个Niagara粒子组件和一个碰撞箱bo…

Java 语言的强大特性

一、面向对象 面向对象编程&#xff08;OOP&#xff09;是一种编程范式&#xff0c;Java 完全遵循这一范式&#xff0c;并具备封装、继承和多态三大核心特性。 1. 封装 封装是将数据和操作封装在类中&#xff0c;通过访问修饰符&#xff08;如 public、private、protected&am…

DevExpress WinForms中文教程:Data Grid - 如何绑定到实体框架数据源?

在本教程中&#xff0c;您将学习如何将DevExpress WinForms的网格控件绑定到实体框架数据源、如何使用数据注释属性来更改网格显示和管理数据的方式&#xff0c;以及如何将单元格值更改发送回数据源。 P.S&#xff1a;DevExpress WinForms拥有180组件和UI库&#xff0c;能为Wi…

PostgreSQL学习总结(13)—— PostgreSQL 15.8 如何成就数据库性能王者?

前言 在当今数据驱动的时代&#xff0c;数据库的性能无疑是企业和开发者最为关注的焦点之一。而 PostgreSQL 15.8 的横空出世&#xff0c;犹如一颗璀璨的明星&#xff0c;在数据库性能的苍穹中闪耀着耀眼的光芒&#xff0c;引得无数人为之侧目。今天&#xff0c;就让我们一同揭…