element-plus el-button 自定义添加icon的方法

前言


不知道为什么设置一个icon,要这么麻烦。
我使用的是"@element-plus/icons-vue": "^2.1.0", "element-plus": "^2.4.2"

代码


      <el-button type="primary"><el-icon><IcGraph />	// 这里是一个组件,由import IcGraph from '@/assets/images/ic_graph.vue'导入</el-icon><span style="vertical-align: middle"> Search </span></el-button>

其中的ic_graph.vue的代码:

<template><svg width="32.000000" height="32.000000" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs><clipPath id="clip17_595"><rect id="数据图" width="32.000000" height="32.000000" fill="white"/></clipPath></defs><g clip-path="url(#clip17_595)"><path id="path" d="M16 28.6667L16 17.3333C16 16.5969 16.5969 16 17.3333 16L28.6667 16C28.6667 9.00439 22.9956 3.33331 16 3.33331C9.00441 3.33331 3.33334 9.00439 3.33334 16C3.33334 22.9956 9.00441 28.6667 16 28.6667Z" stroke="#808080" stroke-width="1.500000" stroke-linejoin="round"/><rect id="rect" x="20.000000" y="20.000000" width="8.000000" height="8.000000" stroke="#808080" stroke-width="1.500000" stroke-linejoin="round"/></g></svg>
</template>

其实就是<template>里面,添加从设计稿复制的svg代码。

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

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

相关文章

大模型之十二十-中英双语开源大语言模型选型

从ChatGPT火爆出圈到现在纷纷开源的大语言模型&#xff0c;众多出入门的学习者以及跃跃欲试的公司不得不面临的是开源大语言模型的选型问题。 基于开源商业许可的开源大语言模型可以极大的节省成本和加速业务迭代。 当前&#xff08;2023年11月17日)开源的大语言模型如下&#…

L1 频段卫星导航射频前端低噪声放大器芯片MS2659

产品简述 MS2659 是一款具有高增益、低噪声系数的低噪声放大器 (LNA) &#xff0c;支持 L1 频段多模式全球卫星定位&#xff0c;可以应用于 GPS 、 北斗二代、伽利略、 GLONASS 等 GNSS 导航接收机中。芯片采 用 SOT23-6 的封装形式。 主要特点 ◼ 支持北斗、 …

提升提测质量之研测共建 | 京东云技术团队

一、序 日常研测工作演绎 你是否也有同样的困惑&#xff1f; 跟进的需求&#xff0c;就在提测前一秒&#xff0c;被告知不能如期提测了&#xff0c;研测计划被打乱&#xff1b; 提测的功能&#xff0c;犹如遇到不好的购物体验&#xff0c;缺斤短两&#xff0c;与prd预期不符…

centos7 killall命令安装、使用

安装 在线安装命 输入下面命令 yum install psmisc -y Psmisc软件包包含三个帮助管理/proc目录的程序。 安装下列程序: fuser, killall,pstree和pstree.x11(到pstree的链接) fuser #显示使用指定文件或者文件系统的进程的PID。 killall #杀死某个名字的进程&#xff0c;它…

JUC工具类_CyclicBarrier与CountDownLatch

最近被问到CyclicBarrier和CountDownLatch相关的面试题&#xff0c;CountDownLatch平时工作中经常用到&#xff0c;但是CyclicBarrier没有用过&#xff0c;一时答不上来&#xff0c;因此简单总结记录一下 1.什么是CyclicBarrier&#xff1f; 1.1 概念 CyclicBarrier&#xff…

Codeforces Round 909 (Div. 3)(A~G)(启发式合并)

1899A - Game with Integers 题意&#xff1a;给定一个数 , 两个人玩游戏&#xff0c;每人能够执行 操作&#xff0c;若操作完是3的倍数则获胜&#xff0c;问先手的人能否获胜&#xff08;若无限循环则先手的人输&#xff09;。 思路&#xff1a;假如一个数模3余1或者2&#…

Failed to restart network.service: Unit network.service not found.

执行systemctl restart network命令&#xff0c;报错Failed to restart network.service: Unit network.service not found. 执行 yum install network-scripts命令 再次执行&#xff0c;正常

Python爬虫批量下载图片

一、思路&#xff1a; 1. 分析URL&#xff0c;图片的URL内嵌于base_url的返回当中 2. 下载图片 二、代码 import time import requests import os from lxml import etreeclass DownloadImg():爬虫进行美女图片下载def __init__(self):self.url http://xxxxxx/4kmeinv/self…

简单漂亮的首页

效果图 说明 这个首页我也是构思了很久&#xff0c;才想出这个界面&#xff0c;大家喜欢的话&#xff0c;可以拿走去使用 技术的话&#xff0c;采用的就是vue的语法&#xff0c;但是不影响&#xff0c;很多样式我都是直接手敲出来的 代码实现 标语 <!-- 标语 start-->&…

【面试经典150 | 数学】加一

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;加一 其他语言python3 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结…

基于SSM的项目管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Java 12 及Tomcat 部署配置

使用的软件版本 1. Java12部署 和之前的Java版本不太一样&#xff0c;12版本不用配置JRE环境。 解压缩文件夹 root账户执行 tar -xzvf /home/software/jdk-12.0.2_linux-x64_bin.tar.gz创建java文件夹 root账户执行 cd /usr mkdir java移动Java文件到创建的文件夹下 root账…

达尔优EK87键盘说明书

EK87说明书连接说明&#xff1a; **有线模式&#xff1a;**开关拨到最右边&#xff0c;然后插线连接电脑即可使用 2.4G **接收器模式&#xff1a;**开关拨到中间&#xff0c;然后接收器插入电脑USB接口即可使用 **蓝牙模式&#xff1a;**开关拨到最左边&#xff0c;然后按FNQ长…

虚拟局域网VLAN_基础知识

虚拟局域网VLAN的概述 一. 虚拟局域网VLAN的诞生背景 将多个站点通过一个或多个以太网交换机连接起来就构建出了交换式以太网。 交换式以太网中的所有站点都属于同一个广播域。 随着交换式以太网规模的扩大&#xff0c;广播域也相应扩大。 巨大的广播域会带来一系列问题: 广…

C#开发的OpenRA游戏之属性BodyOrientation(6)

C#开发的OpenRA游戏之属性BodyOrientation(6) 在顶层定义里会发现这个属性: ^SpriteActor: BodyOrientation: QuantizeFacingsFromSequence: RenderSprites: SpriteActor是用来定义角色的基本属性,它的第一个属性就是BodyOrientation,这个属性主要用来描述角色的身体的…

【FPGA】Verilog:升降计数器 | 波纹计数器 | 约翰逊计数器 | 实现 4-bit 升降计数器的 UP/DOWN

目录 Ⅰ. 理论部分 0x00 升降计数器&#xff08;UP DOWN Counter&#xff09; 0x01 波纹计数器&#xff08;Ripple Counter&#xff09; 0x02 约翰逊计数器&#xff08;Johnson Counter&#xff09; Ⅱ. 实践部分 0x00 实现&#xff1a;升降计数器&#xff08;4-bit&…

modbusRTU通信简单实现(使用NModbus4通信库)

本文实现ModbusRTU通信&#xff0c;使用的是NModbus4通信库&#xff0c;使用 Modbus Slave是一个模拟Modbus协议从机的上位机软件&#xff0c;主要用于模拟测试跟其他主机设备通信的过程。与之成套存在的另一个软件--Modbus Poll&#xff0c;则是模拟Modbus协议主机的上位机软件…

异常

文章目录 概念体系结构分类处理抛异常捕获异常throws 异常声明try-catch 异常捕获finally 异常处理流程自定义异常 概念 在Java中&#xff0c;将程序执行过程中发生的不正常行为称为异常。 比如: 算术异常 Exception in thread "main" java.lang.ArithmeticExcept…

2023.11.15 关于 Spring Boot 配置文件

目录 引言 Spring Boot 配置文件 properties 配置文件说明 基本语法 读取配置文件 优点 缺点 yml 配置文件说明 基本语法 读取配置文件 yml 配置不同数据数据类型及 null 字符串 加单双引号的区别 yml 配置 列表&#xff08;List&#xff09; 和 映射&#xff08;…

ubuntu中/etc/rc.local和/etc/init.d/rc.local的区别是什么

在早期版本的Ubuntu中&#xff0c;通常会使用 /etc/rc.local 或 /etc/init.d/rc.local 文件执行在系统启动时需要运行的自定义脚本或命令。然而&#xff0c;随着Ubuntu的版本升级&#xff0c;这两者的使用方式有了一些变化。 /etc/rc.local&#xff1a; 功能&#xff1a; /etc/…