若依ruoyi-vue中图标使用介绍

图标使用

使用方式

若依ruoyi-vue中使用全局 Svg Icon 图标组件。地址:src\components\SvgIcon\index.vue
该组件是在src\assets\icons\index.js文件中被注册为全局组件的,可以在项目任意地方使用。所有的图标都在src\assets\icons\svg目录下。可自行添加或者删除图标,所有图标都会被自动导入,无需手动操作。

<!-- icon-class 为 icon 的名字; class-name 为 icon 自定义 class-->
<svg-icon icon-class="password"  class-name='custom-class' />
改变颜色

svg-icon 默认会读取其父级的 color fill: currentColor;

你可以改变父级的color或者直接改变fill的颜色即可。

<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" style="fill:red"/>
注意事项

如果你是从 iconfont 下载的图标,记得使用如 Sketch 等工具规范一下图标的大小问题,不然可能会造成项目中的图标大小尺寸不统一的问题。 本项目中使用的图标都是 128*128 大小规格的。

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

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

相关文章

tableau如何传参数到MySQL数据库

1、打开tableau连接本地MySQL-》新建自定义sql-》创建参数 2、新建一个简单的工作表-》把维度拖拽到行显示结果-》右键显示参数 3、参数传递到数据库sql写法 select * from yonghu where yonghu.姓名 like concat(%,<参数.姓名>,%)select * FROMabadata4WHERE abadata4…

css代码的定位及浮动

上次&#xff0c;我们解除了css的内外边距、鼠标悬停及其练习。现在我们学习css元素练习和定位。 元素转换 元素分为块元素、行元素和行内块。 display 显示&#xff1a;转换元素的类型 display:inline; display:block; display:inline-block; display:none;元素隐藏…

基于STM32单片机的汽车胎压、速度及状态监测系统设计与实现

基于STM32单片机的汽车胎压、速度及状态监测系统设计与实现 摘要&#xff1a; 随着汽车电子技术的快速发展&#xff0c;车辆状态实时监控系统的需求日益增长。本文设计并实现了一种基于STM32单片机的汽车胎压、速度及状态监测系统。该系统能够实时监测汽车的胎压、速度以及其他…

MCU自动测量单元:自动化数据采集的未来

随着科技的飞速发展&#xff0c;自动化技术在各个领域中的应用日益广泛。其中&#xff0c;MCU(微控制器)自动测量单元以其高效、精准的特性&#xff0c;成为自动化数据采集领域的佼佼者&#xff0c;引领着未来数据采集技术的革新。本文将深入探讨MCU自动测量单元的原理、优势以…

实习面试算法准备之图论

这里写目录标题 1 基础内容1.1 图的表示1.2图的遍历 2 例题2.1 所有可能的路径 1 基础内容 图没啥高深的&#xff0c;本质上就是个高级点的多叉树而已&#xff0c;适用于树的 DFS/BFS 遍历算法&#xff0c;全部适用于图。 1.1 图的表示 图的存储在算法题中常用邻接表和邻接矩…

庆祝我在CSDN上创作满四年:分享知识,共同成长

引言&#xff1a; 今天&#xff0c;我非常高兴地迎来了在CSDN平台上创作四周年的纪念日。这四年对我来说既是挑战也是成长&#xff0c;我在这里记录了自己的技术探索和心得体会&#xff0c;也收获了来自社区的宝贵知识和友谊。 正文&#xff1a; 创作初衷&#xff1a; 开始在C…

SUSE Linux Rsync+inotify精准系统同步配置实战

配置不难,也可以说难,这完全取决于需求。一.服务器状况: NFS文件服务器,存储提交的附件和图片。希望搭建一个在线的备份文件服务器,实现主服务和备份服务器之间的文件的实时同步。 Filesserver:/tmp # lsb_release -a LSB Version: n/a Distributor ID: SUSE Descri…

84.柱形图中最大的矩阵

二刷终于能过了. 思路解析: 不愧是hard,第一步就很难想, 对于每一个矩阵,我们要想清楚怎么拿到最大矩阵, 对于每个height[i],我们需要找到left和right,left是i左边第一个小于height[i]的,right是右边第一个小于height[i]的,那么他的最大矩阵就是height[i] * (right-left-…

linux下安装deepspeed

安装步骤 一开始安装deepspeed不可以使用pip直接进行安装。 这时我们需要利用git进行clone下载到本地&#xff1a; git clone https://github.com/microsoft/DeepSpeed.git 进入到deepspeed的安装目录下 cd /home/bingxing2/ailab/group/ai4agr/wzf/Tools/DeepSpeed 激活…

LeetCode-旋转链表

每日一题&#xff0c;很久没做链表的题了&#xff0c;今天做l一道相对简单的力扣中等难度题。 题目要求 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&…

Java基础入门day41

day41 约束 实体完整性 主键约束 唯一约束 自增约束 域完整性 限制列的单元格的数据的正确性 非空约束 not null&#xff0c;非空&#xff0c;此列必须有值 create table subject03(sid int primary key auto_increment,subname varchar(20) unique not null,subHour int…

C++ 异常处理机制详解:轻松掌握异常处理技巧

C 异常处理 C 异常处理机制允许程序在运行时处理错误或意外情况。它提供了捕获和处理错误的一种结构化方式&#xff0c;使程序更加健壮和可靠。 异常处理的基本概念&#xff1a; 异常: 程序在运行时发生的错误或意外情况。抛出异常: 使用 throw 关键字将异常传递给调用堆栈。…

智慧浪潮下的产业园区:洞察智慧化转型如何打造高效、绿色、安全的新园区

目录 一、引言 二、智慧化转型的内涵与价值 三、打造高效园区的智慧化策略 1、建设智能化基础设施 2、推广智能化应用 3、构建智慧化服务平台 四、实现绿色园区的智慧化途径 1、推动绿色能源应用 2、实施绿色建筑设计 3、加强环境监测与治理 五、保障园区安全的智慧…

pam配置文件中[default=2 ignore=ignore success=ok]

pam配置文件中第二字段为[default2 ignoreignore successok]&#xff0c;例如&#xff1a; auth [default2 ignoreignore successok] pam_localuser.so {include if "with-smartcard"}这行配置中的第二字段[d…

REST API规范

目录 一、REST相关规范1.1 Http Method1.2 REST接口格式1.3 Http Status1.4 版本控制 二、SpringMVC相关规范2.1 参数校验2.2 响应结果2.3 接口全局异常处理2.4 参数校验提示信息支持国际化2.5 响应码规范 REST JSON已成为Http接口的事实标准&#xff0c;本文给出我平时推荐的R…

大白菜启动U盘想格式化但格式化不了

部分区域被修改分区表保护起来了。直接格式化的话&#xff0c;里面的文件夹都还在。根本格式化不了。特别是可用容量并未还原出来。 进入计算机管理》磁盘管理&#xff0c;看到U盘盘符。别搞错了。删除掉里面的已经分的区域和未分区区域&#xff0c;让它还原成一个整体。退出。…

Webpack-入门

定义 静态模块&#xff1a;指的是编写代码过程中的html&#xff0c;css&#xff0c;js&#xff0c;图片等固定内容的文件 打包&#xff1a;把静态模块内容压缩、整合、翻译等&#xff08;前端工程化&#xff09; 1&#xff09;把less/sass转成css代码 2&#xff09;把ES6降级…

webpack 入口和出口的最佳实践

入口和出口的最佳实践 {ignore} 具体情况具体分析 下面是一些经典场景 一个页面一个JS 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 源码结构 |—— src|—— pageA 页面A的代码目录|—— index.js 页面A的启动模块|—— ...|—— pageB 页面…

matlab学习007-已知离散时间系统的系统函数并使用matlab绘制该系统的零极点图;判断系统的稳定性;幅频和相频特性曲线

目录 题目 离散时间系统的系统函数&#xff1a;H(z)(3*z^3-5*z^210z)/(z^3-3*z^27*z-5) 1&#xff0c;绘制该系统的零极点图 1&#xff09;零极点图 2&#xff09;代码 2&#xff0c;判断系统的稳定性 1&#xff09;判断结果 2&#xff09;代码 3&#xff0c;试用MATL…

闲话 ASP.NET Core 数据校验(一):内置数据校验

前言 所谓输入的是垃圾&#xff0c;输出也必然是垃圾&#xff0c;有多少安全问题隐藏在请求的数据中&#xff0c;所以永远不能相信来自用户端的输入。 对请求数据的合法性进行校验&#xff0c;不仅有助于提升用户界面的友好性&#xff0c;而且有助于提高后台程序的安全性和稳…