【css】svg修改图标颜色

news2025/7/17 12:33:46

项目中使用了大量的svg图标,一开始只是导入直接使用,直到产品提出要根据条件修改图标的颜色

svg教程||菜鸟教程

可以简单看下教程了解下svg

SVG 意为可缩放矢量图形,SVG 使用 XML 格式定义图像。

导入项目的svg图标大概是这样

有个path路径,并且有类名

在style中有个fill对应的颜色就是svg的图标颜色

关于这个fill属性,大概的解释是fill 属性设置形状内的颜色
在这里插入图片描述
需要改颜色的话,要在svg图标的内部,把这个类名改成这样

	.st0{fill:currentColor;}

然后再加一个svg类名,path上的类名不用动

  .svg{
    fill:currentColor;
    color:#1890FF;//这里是默认颜色
}

在页面上通过v-if控制

 <svg-icon class-name="xxx" icon-class="xxx" v-if="scope.row.deptCode == '1'" style="fill: currentColor; color: c0c4cc"></svg-icon>
 <svg-icon class-name="xxx" icon-class="xxx" v-else style="fill: currentColor; color: #1890ff"></svg-icon>
            新增下级
          </el-button>

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

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

相关文章

怎样在应用中实现自助报表功能

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇将记录几次面试中经常被问到的知识点以及对学习的知识点总结。 本篇文章记录的基础知识&#xff0c;适合在学Java的小白&#xff0c;也适合复习中&#xff0c;面试中的…

后台管理系统前端模板(html + CSS + JavaScript)

这是为大家准备的资源链接&#x1f910;&#x1f910;&#x1f910;&#xff1a; 提取码&#xff1a;0000 bootstrap_htmb.zip_免费高速下载|百度网盘-分享无限制百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#…

实现Vue按钮(button)绑定回车(enter)事件

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、页面展示二、实现步骤1.在删除对话框的取消与确定按钮之间添加input输入框2.写个监听器&#xff0c;监听弹窗打开时&#xff0c;给input框自动聚焦&#xff…

AI引领技术变革,自动化云平台所带来的测试工程师进阶危机~

推荐&#xff1a; Python全栈白宝书专栏&#xff0c;免费阶段订阅数量4300&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;加入社区的小伙伴们&#xff0c;除了可以获取博主所有付费专栏的阅读权限之外&#xff0c;还有机会加入 星荐官共赢计划…

微信小程序设计规范

一、宏观角度 微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的&#xff0c;旨在微信生态类建立有号、高效、一致的用户体验的同时&#xff0c;最大程度顺应和支持各业务需求设计…

PHP+MySQL制作简单的用户注册登录界面(注释超详细~附源代码)

成果 网站能实现判断账户信息是否合法&#xff0c;同时附带验证码验证登录。在用户输入正确的用户名与密码后会有登录成功的弹窗&#xff0c;若输入的账户不存在&#xff0c;则会跳转至注册页面。 实现过程 项目文件分配&#xff1a; 1.首先创建login.html 实现的是用户登录…

vue-element-admin--使用体验

原文网址&#xff1a;vue-element-admin--使用体验_IT利刃出鞘的博客-CSDN博客 简介 说明 本文用示例介绍vue-element-admin的用法。 vue-element-admin 是一个后台前端解决方案&#xff0c;它基于 vue 和 element-ui实现。它使用了最新的前端技术栈&#xff0c;内置了 i18 国…

小满Vue3第三十九章(Vue开发桌面程序Electron)

建议视频教程小满Vue3&#xff08;第三十九章 electron桌面程序&#xff09;_哔哩哔哩_bilibili Electron官网Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS. 我们用的VsCode 也是 electron 开发的 electron 内置了 Chromium 和 nodeJS 其中…

【最简便方法】element-plus/element-ui走马灯配置图片以及图片自适应

首先展示官网给的模板 <template><el-carousel :interval"4000" type"card" height"200px"><el-carousel-item v-for"item in 6" :key"item"><h3 text"2xl" justify"center">…

前端实现文件下载的方法

前端实现文件下载 前端下载一般分为两种情况&#xff0c;一种是后端直接给一个文件地址&#xff0c;通过浏览器打开就可以下载&#xff0c;另外一种则需要发送请求&#xff0c;后端返回二进制流数据&#xff0c;前端解析流数据&#xff0c;生成URL&#xff0c;实现下载。 一、…

css添加边框阴影

css边框阴影如何设置&#xff1f; 语法&#xff1a; <style> box-shadow: h-shadow v-shadow blur spread color inset; </style> 取值&#xff1a; h-shadow&#xff1a;必需设置的值&#xff0c;定义水平阴影的位置。允许负值。 v-shadow&#xff1a;必需设置…

微信小程序web-view与H5 通信方式探索

本文作者为奇舞团前端开发工程师小程序简介小程序是一种全新的连接用户与服务的方式&#xff0c;它可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。需求微信小程序 H5 混合开发就是 在一个小程序中&#xff0c;采用部分小程序原生页面&#xff0c;部分通过…

Vue组件通信——父子组件通信的四种方法

引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from /views/components/ChildrenDemo Vue.component(ChildrenDemo,ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)&#xff0c;第二个参数&#xff1a;引入的组件名&#xff08;一般都与组件名保持…

【前端开发环境安装、配置、项目搭建全教程】

前端开发环境安装、配置、项目搭建全教程 1.Node环境安装 简单的说 Node.js 就是运行在服务端的 JavaScrip&#xff0c;基于 Chrome JavaScript 运行时建立的一个平台&#xff0c;Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境&#xff0c;基于 Google 的 V8 引擎&…

uniapp页面跳转的几种方式

uniapp页面跳转的几种方式 一、uni.navigateTo 定义&#xff1a;保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用uni.navigateBack可以返回到原页面。使用&#xff1a; // 1.不传参 uni.navigateTo({url:./home/index }); // 2.传参字符串 uni.navigateTo(…

Vue后台管理系统模板

推荐一些 Vue 常用后台管理系统模板 前言 Vue.js 是一个目前比较流行的前端框架&#xff0c;已经到了前端人人都会的地步&#xff0c;今天这里为大家罗列一下基于 Vue 的后端管理的框架。目前比较流行和 Vue 搭配的 UI组件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-V…

项目中报错 Uncaught (in promise)

项目中报错 Uncaught (in promise) 一、问题&#xff1a;当你调用 Promise.reject() 回调的时候&#xff0c;Chrome 控制台中出现一条警告消息“Uncaught (in promise)”。 例如你简单封装axios的响应拦截器的时候&#xff1a; // 响应拦截 service.interceptors.response.u…

VUE 富文本编辑器 tinymce - - - - 对懒人 非常友好 一看就懂

首先个人觉得 tinymce这个富文本编辑器是最好用 最编辑的 &#xff0c;对懒人非常友好 的一款编辑器&#xff0c;刚 有哟个项目 &#xff0c;就遇到了 使用富文本编辑的坑 &#xff0c;因为赶项目进度自己在网上随便找了一个富文本编器&#xff0c;就是 quill 这个 坑 实在太多…

【个人网站】零基础个人网站搭建完整教程(附免费源码)

零基础个人网站搭建完整教程&#xff08;一&#xff09; 内容包括&#xff1a;前端搭建后端搭建源码网盘链接搭建服务器网站上线&#xff08;完整教程&#xff09; 从0到1搭建网站零基础个人网站搭建完整教程&#xff08;一&#xff09;前言一、前端搭建一、副页设计1.显示文字…

最新Eclipse安装教程(2022-09)

前言 现在是在校大学生&#xff0c;未来想从事大数据相关的工作&#xff0c;目前在b站学习大数据&#xff0c;写这些的目的是为了整理、巩固学过的知识&#xff0c;以后自己工作了也可以回头看看&#xff0c;如果还能够帮助到大家&#xff0c;就再好不过了&#xff01; 一、Ec…