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,一经查实,立即删除!

相关文章

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 …

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;以下是…

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…

【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;浏览器会…

每日题库:Huawe数通HCIA——14(30道)

所有资料均来源自网络&#xff0c;但个人亲测有效&#xff0c;特来分享&#xff0c;希望各位能拿到好成绩&#xff01; PS&#xff1a;别忘了一件三连哈&#xff01; 今日题库&#xff1a; 201. 如下图所示的网络&#xff0c;主机存在ARP缓存&#xff0c;主机A.发送数据包给…

Echarts 可视化图库案例(Make A Pie)

1、Made A Pie Made A Pie 2、可视化社区 &#xff08;Made A Pie 替代&#xff09; 可视化社区

产品创新管理:从模仿到引领,中国企业的创新之路

一、引言 在全球化竞争日益激烈的今天&#xff0c;科技创新已成为推动国家经济增长和社会进步的关键动力。中国自改革开放四十年来&#xff0c;在科技创新领域取得了举世瞩目的成就&#xff0c;从跟踪模仿到自主研发&#xff0c;再到自主创新、开放创新和协同创新并举&#xf…

【机器学习300问】110、什么是Lasso回归模型?

LASSO回归的全称是Least Absolute Shrinkage and Selection Operator&#xff0c;中文叫“最小绝对收缩和选择算子”&#xff0c;用一个比喻来初步感受一下它的作用&#xff1a; 想象你在整理一个杂乱无章的房间&#xff0c;里面堆满了各种物品&#xff08;代表众多的预测变量&…

【Vue】小兔鲜首页 - 拆分模块组件 - 局部注册

文章目录 一、分析二、局部注册 一、分析 小兔仙组件拆分示意图 开发思路 分析页面&#xff0c;按模块拆分组件&#xff0c;搭架子 (局部或全局注册) 根据设计图&#xff0c;编写组件 html 结构 css 样式 (已准备好) 拆分封装通用小组件 (局部或全局注册)&#xff0c;一般这…

arcgis如何给没有连通的路打交点

1、在打交点的时候需要先有图层&#xff0c;图层的构建流程如下所示 1、找到目录 2、先新建一个文件夹 3、在新建的文件夹下新建一个文件地理数据库 4、在文件地理数据库下&#xff0c;新建一个要素类数据集 5、在要素类数据集下进行数据导入&#xff0c;选择单个导入 6、在要…

据报道,FTC 和 DOJ 对微软、OpenAI 和 Nvidia 展开反垄断调查

据《纽约时报》报道&#xff0c;联邦贸易委员会 (FTC) 和司法部 (DOJ) 同意分担调查微软、OpenAI 和 Nvidia 潜在反垄断违规行为的职责。 美国司法部将牵头对英伟达进行调查&#xff0c;而联邦贸易委员会将调查 OpenAI 与其最大投资者微软之间的交易。 喜好儿网 今年 1 月&a…