首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果我将颜色道具传递给svg组件,则svg的颜色在React中不会改变

在React中,当将颜色道具传递给SVG组件时,SVG的颜色不会直接改变。这是因为SVG组件在React中是通过使用内联样式进行渲染的,而不是通过传递属性来更改样式。

要改变SVG组件的颜色,可以通过以下几种方式实现:

  1. 使用内联样式:在SVG组件中使用内联样式来设置颜色。可以通过将颜色属性传递给内联样式对象中的fill属性来改变SVG的填充颜色,或将颜色属性传递给stroke属性来改变SVG的描边颜色。

例如,如果要将颜色道具传递给SVG组件,可以通过以下方式改变SVG的颜色:

代码语言:txt
复制
function SVGComponent({ color }) {
  const svgStyle = {
    fill: color, // 设置填充颜色
    stroke: color // 设置描边颜色
  };

  return (
    <svg style={svgStyle} ...>
      {/* SVG内容 */}
    </svg>
  );
}
  1. 使用CSS类名:通过为SVG组件添加一个CSS类名,并在CSS中定义该类名的样式来改变SVG的颜色。
代码语言:txt
复制
function SVGComponent({ color }) {
  return (
    <svg className="svg-component" ...>
      {/* SVG内容 */}
    </svg>
  );
}

在CSS文件中:

代码语言:txt
复制
.svg-component {
  fill: var(--color); /* 设置填充颜色 */
  stroke: var(--color); /* 设置描边颜色 */
}
  1. 使用库或工具:有一些专门用于处理SVG的库或工具,可以更方便地改变SVG的颜色。例如,可以使用react-svg库来加载SVG文件,并使用color属性来动态改变SVG的颜色。
代码语言:txt
复制
import { ReactSVG } from 'react-svg';

function SVGComponent({ color }) {
  return (
    <ReactSVG src="path/to/svg/file.svg" className="svg-component" color={color} />
  );
}

总结起来,在React中将颜色道具传递给SVG组件时,可以通过使用内联样式、CSS类名或库来改变SVG的颜色。这些方法都能有效地实现SVG颜色的变化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 实战教程】从0到1 构建 github star管理工具

,我们会发现webpack配置文件找不到,我们需要运行以下命令wepack配置显示出来 npm run eject scss 这个方法参照是create-react-app说明adding-a-css-preprocessor-sass-less-etc...改变颜色要使用fill属性 .icon-refresh { width: 20px; height: 20px; fill: #606f7b; } 注意 图片中自带p-id元素react...中会自动变成pId,随后会被react输出警告日志,建议把pid 属性删除,这个属性不影响显示 我们经常在iconfont上下载svg图片,但是有些svg图片内部默认设置了颜色如果要让我们样式当中颜色起作用...[ext]', } 路由 使用react-router-dom进行路由管理,和Vue-router一样,需要对要用到路由级别组件进行注册。直接组件写在router内部即可。...,当组件放置router组件props内置会有一个histroy属性,即this.props.history,使用它就可以实现push,replace等跳转了功能了。

15111

React 实战教程】从0到1 构建 github star管理工具

,我们会发现webpack配置文件找不到,我们需要运行以下命令wepack配置显示出来 npm run eject 复制代码 scss 这个方法参照是create-react-app说明adding-a-css-preprocessor-sass-less-etc...改变颜色要使用fill属性 .icon-refresh { width: 20px; height: 20px; fill: #606f7b; } 复制代码 注意 图片中自带p-id元素...react中会自动变成pId,随后会被react输出警告日志,建议把pid 属性删除,这个属性不影响显示 我们经常在iconfont上下载svg图片,但是有些svg图片内部默认设置了颜色如果要让我们样式当中颜色起作用...[ext]', } 复制代码 路由 使用react-router-dom进行路由管理,和Vue-router一样,需要对要用到路由级别组件进行注册。直接组件写在router内部即可。...,当组件放置router组件props内置会有一个histroy属性,即this.props.history,使用它就可以实现push,replace等跳转了功能了。

1.3K20
  • 从 Web 图标演进历史看最佳实践

    二、CSS Sprite 后来大约本世纪初头几年,人们找到了一种新技巧:通过图片合并技术(image sprite)引入前端,数量众多图标图片进行巧妙拼合,并且样式通过 background-position...使用 React/Vue/Angular/Svelte/…… 等各种框架过程,我们已经习惯于视图逻辑通过组件进行拆解和复用。...npm 上目前也有很多基于各个组件框架开发图标组件,包括 FontAwesome 都已经内置了 SVGReact/Vue 组件等更现代化方案。...每个团队能根据自身技术栈,选择需要导出组件实现类型(React/Vue/San/...)。 图标组件图标数据会被自动优化、压缩。 图标组件库应该是可以跟随图标库数据更新升级。...如果没有特殊需求,直接使用我们提供 React/Vue 等框架下组件模板,就可以获得高质量前端图标组件实现了。 通过编译服务发布完成以后,前端工程师只需要知道:1.

    1.7K10

    React | 如何制作一个按钮组件

    概要本文从零开始,使用React + TypeScript方式制作一个按钮组件。面临挑战起个好名计算机,有一个经常遇到但又十分难缠问题,起名。好名字可能是灵感闪现,也可能来自借鉴。...所以笔者回忆了下大厂组件库,决定命名为fafa-design于是终端输出如下指令npx create-react-app fafa-design --template typescript代码结构关于代码结构...值得一提是,如果你想在TypeScript“继承”属性,并且添加自定义,你可以这样写:export interface ButtonProps extends React.HTMLAttributes...给点颜色在按钮使用场景,使用主要,次要,危险等颜色。不同组件库,所选这几种主题略有差别。见下面:设计颜色不在行,来到代码层面,该怎样实现呢?...比如,这里加了一个TDesign上传图标 <svg fill="none" viewBox="0 0 24 24" width="1em

    19830

    Iconfont 还是不能上传,如何维护你 Icon?

    现在做事情 所在公司目前正在建设低代码平台,这个低代码平台可以说是无代码,需要从原先各个应用抽取部分页面和组件成为低代码组件,这样低代码平台就可以通过拖拽组件,形成一个有个性化业务场景。...如果 A 应用 A 组件需要更新,那么低代码组件也需要同步更新,所以说组件并不是单独一个 npm 包,而是类似于 webpack5 模块联邦(Module Federation)打包出来 remote...没有 unicode,不会因为抽离组件而造成图标冲突 低端设备上 SVG 有更好清晰度。 支持多色图标。...svg 转为 React Component webpack 我们可以使用一个 叫 svgr loader,它可以 SVG 转换为一个随时可用 React 组件。...你可以 SVG 文件放在 src/文件夹任何位置,并将它们作为 React 组件导入使用。

    1.4K30

    Ant Design 4.0 发布,来看看如何升级?

    如果你仍在使用 React 15,请参考React 16 升级文档 其余 React 16 废弃生命周期 API 请参考 迁移导引 4.0 有哪些不兼容变化 设计规范调整 行高从 1.5(21px)...Selected 颜色和 Hovered 颜色进行了交换。 全局阴影优化,调整为三层阴影区分控件层次关系。 气泡确认框图标的使用改变,由问号改为感叹号。...移除了 Select combobox 模式,请使用 AutoComplete 替代。 图标升级 antd@3.9.0 ,我们引入了 svg 图标(为何使用 svg 图标?)。...迁移工具修改详情 @ant-design/codemod-v4 会帮你迁移到 antd v4, 废弃组件通过 @ant-design/compatible 保持运行, 一般来说你无需手动迁移。...如果升级过程遇到了问题,请到 GitHub issues 和 codemod Issues 进行反馈。我们会尽快响应和相应改进这篇文档。

    6K10

    聊聊 React 组件技术选型与设计

    base64 引入 base64 也是一种常用方法,但是由于 svg 作为背景图引入,只能控制它大小,不能覆盖它颜色,也更不能修改 svg 内部元素,不够灵活。...React Component、SVGUseElement 和直接写入 svg 元素 这三种方式本质上都是 svg 作为 html 元素进行渲染,但具体使用方式不同。...且我们只要定义好颜色变量,并约定使用它,开发组件时候只写一次就可以支持多个主题。 可惜是 CSS 变量 android4、IE11 及以下等有兼容性问题。我们有如下三种方案: ?...icon 适配 RTL 下,部分 icon 需要镜像。前面我们已经介绍,icon 最佳方式是使用 svgr svg 转换为 React Component。...另外,如果是通用组件库,组件推广是一个重中之重事情,有更多业务方接入,才能推动组件进一步迭代,形成良性循环。

    1.9K10

    前端反卷计划-组件库-06-Icon组件开发

    是程序员库里。今天开始分享如何从0搭建UI组件库。这也是前端反卷计划一项。接下来日子,我会持续分享前端反卷计划每个知识点。...以下是前端反卷计划内容:目前这些内容持续更新到了 学习文档 。感兴趣欢迎一起学习!...@fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save2.新建Icon目录2.新建Icon目录,同其他组件 3...';5.把iconclassName和主题变量对上6.使用FontAwesomeIcon组件来渲染,class和其他本身props带上7.开始给icon增加color,但是color太多,我们这里使用...-组件库-02-storybook前端反卷计划-组件库-03-组件样式前端反卷计划-组件库-04-Button组件开发# 前端反卷计划-组件库-05-Menu组件开发持续更新目前这些内容持续更新到了

    29210

    React Conf 2019 样式新方案

    React Conf 2019 已经正式结束。 会上讲了很多激动人心技术点,这里先介绍一些比较感兴趣点, 希望对大家有所启发。...CSS-in-JS Facebook 使用 Css-in-Js,而今年 React conf 给出了一种技术方案, 413 kb 样式文件体积降低到 74kb!...首先是加载顺序,class 生效顺序与加载顺序有关,而按照样式值生成 class 可以精确控制样式加载顺序,使其与书写顺序对应: 这么做永远不会出现头疼样式覆盖问题。...主题方案 如果使用 CSS 变量定义主题,那么换肤就可以由最外层 class 轻松决定了: 字体颜色具体值由外层 class 决定,因此外层 class 就可以控制所有子元素样式: 将其封装成 React...图标方案 下面是设计师给出 svg 代码: 将其包装为 React 组件: 结合上面提到主题方案,就可以控制 svg 主题颜色。 以上就是本篇全部内容, 希望对你有所帮助。

    59010

    如何在Vue项目中更优雅地使用svg

    vue.config,js module.export 中新增: module.expors = { chainWebpack(config){ //排除icons目录svg文件处理...}, computed: { iconNameCp() { return `#icon-${this.iconName}` } } } 使用组件时候可以通过值...> 样式修改 从 iconfont 下载下来图标文件默认没有内联 fill 属性,所以可以像上面那样直接为 svg 元素指定 fill 属性,fill 会继承给子元素;如果下载时候选择了颜色,就会多出来内联...选择器拿到,所以上面这个样式声明不会起效果。...js 文件引入项目中即可,这种方式同样可以 svg 注入到 html : 如何在Vue项目中更优雅地使用svg-3.png 但是这种方式不利于代码维护,不可能说每一次新增图标都到 iconfont

    13.2K21

    Element Plus el-icon 到底怎么用?

    这是参与「掘金日新计划 · 4 月更文挑战」第1天,点击查看活动详情。 本文简介 点赞 + 关注 + 收藏 = 学会了 Vue 生态里, Element UI 是排名前列组件库。...Icon Element Plus 使用逻辑 Element Plus 抛弃了字体图标的用法,直接使用了 svg 方式。 可以说,图标这个东西被拎出来单独维护了。...通过 svg组件 方式使用图标,如需设置图标大小和颜色,都需要通过 css 来设置。 全局引入 全部引入方式会将所有 svg组件 都注册到全局,用时候比较方便,但会牺牲一点性能。...svg图标组件,可以用以下方式 main.js 里注册(以 Edit 图标为例) /* 省略部分代码 */ import { Edit } from '@element-plus/icons-vue...Plus 还提供了 el-icon 组件用来包裹 svg图标组件 ,使得设置图标大小和颜色更加方便。

    6.7K30

    SVG 菜鸟 Recharts 自定义图表实战

    饼图实现 自定义柱状图 如图,这里饼图圆环部分,使用了 PieChart 组件,中间文字和图例直接使用 HTML 渲染,不依赖 Recharts。...2.1 实现圆环部分放大 Recharts 提供 Pie 组件可以实现基本圆环部分。需要自定义颜色情况下,通过 Cell 组件把饼图每一份颜色传入。...脑洞:直接在组件里面写  是否能出现在最终生成  里面呢?试着写了下,还真可以!说明这个脑洞是可行。...与 React 在做这个需求时也开始直接入门了 SVG,掌握了新一门控制视觉展示技术,满满收获~ React 直接渲染 SVG 也进一步打开了眼界,原来她不仅可以渲染 HTML 元素,也可以直接撸...通过 React 实现一套代码不同平台上构造许多复杂 UI 逻辑,让实实在在地感受到了这样抽象威力所在。

    1.6K20

    10个关于 Vue 高级开发技巧

    虽然,高级 Vue 开发人员会发现这些概念非常有用,但我已经详细概述了如何完成每个概念,因此不会让初学者掉队! 如果你需要任何进一步解释,请在留言区给我留言,很乐意为你提供帮助。...现在,我们将此代码粘贴到新组件模板建议所有 SVG 图标组件放入一个新文件夹,并相应地命名它们 (components/SVG/IconMoon.vue) 以保持组织有序。...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面: 在上面的示例,当我鼠标悬停在 SVG 上时,只是在要更改部分上设置一个类(此处称为...你可以附加任何你想要创建自定义道具验证器逻辑,但以下可能是你最常用情况(验证字符串选项): 在下面的示例创建了一个应用程序中使用自定义 Button 组件。...对于这些道具每一个,声明只想接受几个不同选项。如果传递了错误东西,这将帮助我调试代码。它还将帮助其他人查看我代码以了解该组件可以接受哪些选项。

    6.1K10

    《精通reactvue组件设计》之5分钟实现一个Tag(标签)组件和Empty(空状态)组件

    可以在线导入SVG格式字体,并进行编辑,然后下载来使用,组件设计中有具体使用介绍....如果对于react/vue组件设计原理不熟悉,可以参考之前写组件设计系列文章: 《精通react/vue组件设计》之用纯css打造类materialUI按钮点击动画并封装成react组件 《精通...react/vue组件设计》之快速实现一个可定制进度条组件 《精通react/vue组件设计》之基于jsoneditor二次封装一个可实时预览json编辑器组件(react版) 正文 开始组件设计之前希望大家对...一个tag标签组件一般都会有如下需求点: 可以改变标签颜色 提供关闭标签配置,让用户可以关闭标签 关闭标签回调,让用户能控制标签关闭后触发动作 需求收集好之后,作为一个有追求程序员, 会得出如下线框图...首先我们要想在react函数式组件操作dom, 最好方式是使用ref, 关于ref使用如果不熟悉可以参考react官方文档,这里实现如下: import React from 'react' import

    1.4K20

    11 个高级 Vue 编码技巧

    虽然,高级 Vue 开发人员会发现这些概念非常有用,但我已经详细概述了如何完成每个概念,因此不会让初学者掉队! 如果你需要任何进一步解释,请在留言区给我留言,很乐意为你提供帮助。...现在,我们将此代码粘贴到新组件模板建议所有 SVG 图标组件放入一个新文件夹,并相应地命名它们 (components/SVG/IconMoon.vue) 以保持组织有序。...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面:在上面的示例,当我鼠标悬停在 SVG 上时,只是在要更改部分上设置一个类(此处称为...你可以附加任何你想要创建自定义道具验证器逻辑,但以下可能是你最常用情况(验证字符串选项):在下面的示例创建了一个应用程序中使用自定义 Button 组件。请注意,有变体和类型道具。...对于这些道具每一个,声明只想接受几个不同选项。如果传递了错误东西,这将帮助我调试代码。它还将帮助其他人查看我代码以了解该组件可以接受哪些选项。

    2.6K20

    10个关于 Vue 高级开发技巧

    虽然,高级 Vue 开发人员会发现这些概念非常有用,但我已经详细概述了如何完成每个概念,因此不会让初学者掉队! 如果你需要任何进一步解释,请在留言区给我留言,很乐意为你提供帮助。...建议所有 SVG 图标组件放入一个新文件夹,并相应地命名它们 (components/SVG/IconMoon.vue) 以保持组织有序。...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面: 在上面的示例,当我鼠标悬停在 SVG 上时,只是在要更改部分上设置一个类(此处称为...你可以附加任何你想要创建自定义道具验证器逻辑,但以下可能是你最常用情况(验证字符串选项): 在下面的示例创建了一个应用程序中使用自定义 Button 组件。...对于这些道具每一个,声明只想接受几个不同选项。如果传递了错误东西,这将帮助我调试代码。它还将帮助其他人查看我代码以了解该组件可以接受哪些选项。

    6K20

    11 个高级 Vue 编码技巧

    虽然,高级 Vue 开发人员会发现这些概念非常有用,但我已经详细概述了如何完成每个概念,因此不会让初学者掉队! 如果你需要任何进一步解释,请在留言区给我留言,很乐意为你提供帮助。...现在,我们将此代码粘贴到新组件模板建议所有 SVG 图标组件放入一个新文件夹,并相应地命名它们 (components/SVG/IconMoon.vue) 以保持组织有序。...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面:在上面的示例,当我鼠标悬停在 SVG 上时,只是在要更改部分上设置一个类(此处称为...你可以附加任何你想要创建自定义道具验证器逻辑,但以下可能是你最常用情况(验证字符串选项):在下面的示例创建了一个应用程序中使用自定义 Button 组件。请注意,有变体和类型道具。...对于这些道具每一个,声明只想接受几个不同选项。如果传递了错误东西,这将帮助我调试代码。它还将帮助其他人查看我代码以了解该组件可以接受哪些选项。

    2.6K30

    比肩阿里Iconfont图库又一Icon库,太好用了

    ,让大多数设计师都能够选择适合自己风格图标,并支持把图标源文件导出为React、Vue2、Vue3、SVG多种形式组件代码,让开发者使用更高效。...:复制SVG code、复制React 组件、复制Vue组件、下载PNG、下载SVG 针对技术同学,支持图标组件NPM包导出,包括React Icons/ Vue Icons/ Vue3 Icons /...://github.com/bytedance/IconPark/issues 官网使用 调整大小 粗线配置 风格调整与颜色调整 安装方式 这里只介绍一 vue3 下安装使用方式,如果小伙伴有其它平台需求...IconPark官方图标库,可以跨平台导出多种图标组件代码,包括React、Vue2、Vue3格式,尤其是B端场景下,很方便前端同学使用 图标库找不到图标怎么办 点击“Github Issue提需求”...总结 不管怎么说,IconPark 还是挺香项目使用也是比较方便,大大节约了前端同学开发时间。特别是一些丰富配置以及不同人群使用,让你工作变得更加高效而美观~~

    1.4K10
    领券