在 React 中改变 SVG 颜色

原创已于 2022-10-16 10:14:09 修改 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #css3

于 2022-06-16 15:49:30 首次发布

React 入门法则专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在React应用中使用svgr加载器处理SVG格式，并通过添加fill或stroke属性来改变SVG组件的颜色。通过设置`fill=currentColor`和`stroke=currentColor`，可以确保SVG元素颜色与父元素一致，实现动态颜色效果。同时，检查SVG文件中是否存在不必要的fill属性，以确保颜色设置生效。

利用 svgr 加载器处理 SVG 格式
导入

import CloudSVG from "/public/img/application/panel/cloud.svg";

使用这个 SVG 组件，直接添加 fill 属性，改变 SVG 的颜色

<CodeSVG fill="#404a59" />

如果没有其作用的话，检查 SVG 文件：
1. 注意将 fill 改为 current
2. path上如果有 fill 属性的话，可以将其删除
如果是 stroke 的话，用 currentColor ：

<svg width="20" height="17" viewBox="0 0 20 17" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path clip-rule="evenodd" d="M2.636 1.545h14.727c.904 0 1.637.733 1.637 1.637v10.636c0 .904-.733 1.636-1.636 1.636H2.636A1.635 1.635 0 0 1 1 13.818V3.182c0-.904.733-1.637 1.636-1.637z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="m1.12 2.575 7.693 5.503a2 2 0 0 0 2.325.002l7.738-5.519" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>