element-plus 的icon 图标的使用

element-plus的icon 已经独立出来了,需要单独安装

1. npm安装 icon包

npm install @element-plus/icons-vue

2.注册到全局组件中

同时注册到全局组件中,或者按需单独引入,这里只介绍全局引入。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue' // 引入所有图标,并命名为 Icons// 通过遍历的方式注册所有 svg组件,会牺牲一点点性能import App from './App.vue'
import router from './router'const app = createApp(App)for (let i in Icons) {app.component(i, Icons[i])
}app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')

3.使用

可使用e-icon标签,引入对应的icon,也可和button联合使用

在这里插入图片描述

<el-icon><Plus /></el-icon><el-icon><Loading /></el-icon>

在这里插入图片描述
具体需要哪些icon 可上官网上搜索
https://element-plus.org/zh-CN/component/icon.html#%E7%BB%93%E5%90%88-el-icon-%E4%BD%BF%E7%94%A8

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

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

相关文章

2024全国高考作文题解读(讯飞星火3.0版本)

新课标I卷 阅读下面的材料&#xff0c;根据要求写作。&#xff08;60分&#xff09; 随着互联网的普及、人工智能的应用&#xff0c;越来越多的问题能很快得到答案。那么&#xff0c;我们的问题是否会越来越少&#xff1f; 以上材料引发了你怎样的联想和思考&#xff1f;请写…

Python易错点总结

目录 多分支选择结构 嵌套选择 用match模式识别 match与if的对比 案例&#xff1a;闰年判断 三角形的判断 用whlie循环 高斯求和 死循环 用for循环 ​编辑continue​编辑 whlie与else结合 pass 序列 列表&#xff08;有序&#xff09; 元组&#xff08;有序&…

LeetCode热题100—链表(二)

19.删除链表的倒数第N个节点 题目 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5] 示例 2&#xff1a; 输入&#xff1a;head [1], n 1 …

SpringBoot的Profiles是什么

在 Spring Boot 中&#xff0c;Profiles 提供了一种隔离配置的方法&#xff0c;允许你定义多套配置&#xff0c;并且在不同的环境下激活不同的配置。例如&#xff0c;一个常见的用例是为开发、测试和生产环境提供不同的配置。 Profiles 可以帮助你在应用的不同运行环境之间切换…

Docker中搭建likeadmin

一、使用Docker中的docker-compose搭建likeadmin 1.去网址&#xff1a;https://gitee.com/likeadmin/likeadmin_php中下载likeadmin 注册一个giee账号后 点那个克隆下载 按照序号在终端复制粘贴进去。 接着&#xff0c;输入ls 可以发现有一个这个&#xff1a; 里面有一个like…

摄影店展示服务预约小程序的作用是什么

摄影店包含婚照、毕业照、写真、儿童照、工作照等多个服务项目&#xff0c;虽然如今人们手机打开便可随时拍照摄影&#xff0c;但在专业程度和场景应用方面&#xff0c;却是需要前往专业门店服务获取。 除了进店&#xff0c;也有外部预约及活动、同行合作等场景&#xff0c;重…

Ezsql(buuctf加固题)

开启环境 SSH连接 第一个为页面地址WEB服务 or 11# 利用万能密码登录 密码可以随便输入或者不输入 这里就可以判断这个题目是让我们加固这个登录页面 防止sql注入 查看index.php 添加以下代码 $username addslashes($username); $password addslashes($password);…

2024年京东618红包领取跨店满300减50第二波活动时间什么时候开始到几号结束?

2024年京东618活动时间 整个618红包满减活动时间是从&#xff1a;2024年5月28日12:00开始一直持续到6月20日23:59 第一波红包领取活动时间是从&#xff1a;2024年5月28日12:00开始到6月6日23:59结束 第二波红包领取活动时间是从&#xff1a;2024年6月7日00:00开始到6月18日2…

【HarmonyOS】放大缩小手势实现

【HarmonyOS】放大缩小手势实现 一、鸿蒙中手势的类型&#xff1a; 对于放大缩小手势&#xff0c;在应用开发中使用较为常见&#xff0c;例如预览图片时&#xff0c;扫码时等。 在鸿蒙中对于常见的手势进行的封装&#xff0c;可以通过简单的API进行监听调用&#xff0c;以下是…

springboot webflux 返回字节流

在Spring Boot WebFlux中&#xff0c;可以使用Mono<byte[]>或Flux<byte[]>作为响应体来返回字节流。以下是一个简单的示例&#xff1a; 1. 首先&#xff0c;添加WebFlux依赖到pom.xml文件中&#xff1a; xml <dependency> <groupId>org.springframewo…

k8s测试题

k8s集群k8s集群node01192.168.246.11k8s集群node02192.168.246.12k8s集群master 192.168.246.10 k8s集群nginxkeepalive负载均衡nginxkeepalive01&#xff08;master&#xff09;192.168.246.13负载均衡nginxkeepalive02&#xff08;backup&#xff09;192.168.246.14VIP 192…

【因果推断python】24_倾向得分2

目录 倾向加权 倾向得分估计 倾向加权 好的&#xff0c;我们得到了倾向得分。怎么办&#xff1f;就像我说过的&#xff0c;我们需要做的就是以此为条件。例如&#xff0c;我们可以运行一个线性回归&#xff0c;它仅以倾向得分为条件&#xff0c;而不是所有的 X。现在&#xff…

Spark 之 HiveStrategies

HiveTableRelation 相关代码 HiveStrategies.scala 当 relation.tableMeta.stats.isEmpty 是&#xff0c; 即调用 hiveTableWithStats class DetermineTableStats(session: SparkSession) extends Rule[LogicalPlan] {private def hiveTableWithStats(relation: HiveTableRel…

《微机原理及接口技术》

编程题&#xff1a; 编制一个程序片断&#xff0c;把保存在变量dataA和dataB中较大的数据取出后存入maxC。假设变量存放的是32位有符号数。 OV AX, DATA ; 段初始化 MOV DS, AX MOV AX, STACK MOV SS, AX MOV DX, WORD PTR BUFA2 ; 按题意&#xff0c;将数送入 DX,AX, BX,…

千问Qwen7B chat:简单代码使用

我们先用一个简单的例子看一下千问的代码逻辑及效果。 from modelscope import AutoModelForCausalLM, AutoTokenizer from modelscope import GenerationConfig# 加装分词 tokenizer AutoTokenizer.from_pretrained("qwen/Qwen-7B-Chat", revisionv1.0.5, trust_r…

每日一题36:数据分组之科目种类数量

一、每日一题 表: Teacher ------------------- | Column Name | Type | ------------------- | teacher_id | int | | subject_id | int | | dept_id | int | ------------------- 在 SQL 中&#xff0c;(subject_id, dept_id) 是该表的主键。 该表中的每一行都表示…

【postgresql初级使用】视图上的触发器instead of,替代计划的rewrite,实现不一样的审计日志

instead of 触发器 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 inst…

Python私教张大鹏 Vue3整合AntDesignVue之Layout布局

案例&#xff1a;栅格布局 核心代码&#xff1a; <template><a-row><a-col :span"24">col</a-col></a-row><a-row><a-col :span"12">col-12</a-col><a-col :span"12">col-12</a-col…

国际货币基金组织警告:网络攻击影响全球金融稳定

近日&#xff0c;在一份关于金融稳定的报告中&#xff0c;国际货币基金组织&#xff08;IMF&#xff09;用了一章&#xff08;共三章&#xff09;的篇幅描述了网络攻击对金融环境的影响&#xff0c;并警告称&#xff0c;全球金融稳定正受到日益频繁和复杂的网络攻击的威胁。同时…

面试题react03

React事件机制&#xff1a; React的事件机制可以分为两个部分&#xff1a;事件的触发和事件的处理。事件的触发&#xff1a;在React中&#xff0c;事件可以通过用户与组件进行交互而触发&#xff0c;如点击、鼠标移动、键盘输入等。当用户与组件进行交互时&#xff0c;浏览器会…