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

devtools/2024/11/6 21:32:01/

图标使用

使用方式

若依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的颜色即可。

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

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


http://www.ppmy.cn/devtools/15607.html

相关文章

PCA(Principal Component Analysis,主成分分析)与矩阵X的协方差矩阵之间的联系

PCA&#xff08;Principal Component Analysis&#xff0c;主成分分析&#xff09;是一种常用的降维技术&#xff0c;用于将高维数据集投影到低维空间中。在PCA中&#xff0c;投影方程将原始特征向量 ( x 1 , x 2 , … , x p ) (x_1, x_2, \ldots, x_p) (x1​,x2​,…,xp​)映射…

01年小伙对编程工作的认知

最近招了一个01年的小伙。半个月离职了。 小伙211本科计算机毕业&#xff0c;有写博客的习惯&#xff0c;面聊时感觉一切正常&#xff0c;感觉经验跟能力匹配&#xff0c;也挺符合岗位。 于是迅速入职上岗&#xff0c;开始干活。 但入职后发现不对劲。 频繁请假&#xff0c…

大学生在线考试|基于SprinBoot+vue的在线试题库系统系统(源码+数据库+文档)

大学生在线考试目录 基于SprinBootvue的在线试题库系统系统 一、前言 二、系统设计 三、系统功能设计 试卷管理 试题管理 考试管理 错题本 考试记录 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#…

学习STM32第十九天

PWR电源控制 一、电源系统 STM32F4xx电源供电结构框图如下 电压管理器&#xff08;Voltage Regulator&#xff09;共有三种模式 run mode 此模式下&#xff0c;电压管理去稳定向核心、内存和外设提供1.2V电压&#xff0c;输出电压可由软件变换。stop mode 此模式下&#xf…

盲人出行挑战与曙光:“盲人视觉辅助技术研发”助力无障碍生活

作为一名资深记者&#xff0c;我深感盲人朋友们在日常出行中面临的种种困难。然而&#xff0c;在科技日新月异的今天&#xff0c;一项名为蝙蝠避障的专为盲人视觉辅助技术研发的领域正在以前沿科技成果&#xff0c;为改善盲人出行困境带来希望之光。本文将深入探讨这一技术如何…

DHCP和代理IP的区别

一、什么是DHCP DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;&#xff0c;即动态主机配置协议&#xff0c;是一种网络协议&#xff0c;用于使网络中的主机能够动态地从DHCP服务器获取网络配置参数&#xff0c;如IP地址、子网掩码、默认网关以及DNS服务器…

医疗器械模拟运输验证注册标准ASTM D4169-23

ASTM D4169 是一种实践&#xff0c;它为在实验室中评估运输单元承受运输环境的能力提供了统一的基础。为此&#xff0c;负载会受到在各种分配周期中可能出现的特定危险的影响&#xff0c;以便了解它们在面对特定情况时的行为并因此纠正潜在问题。 2023 年&#xff0c;ASTM D41…

学习笔记-微服务高级(黑马程序员)

Sentinel 测试软件 jmeter 雪崩问题 个微服务往往依赖于多个其它微服务,服务提供者I发生了故障&#xff0c;依赖于当前服务的其它服务随着时间的推移形成级联失败 超时处理 设定超时时间&#xff0c;请求超过一定时间没有响应就返回错误信息 仓壁模式 限定每个业务能使用的线…