如何在 React 中更改 svg 图标颜色？答案

【问题标题】：How can I change svg icon colors in React?如何在 React 中更改 svg 图标颜色？
【发布时间】：2021-06-01 02:03:54
【问题描述】：

Svg 文件：

<svg width="187" height="186" viewBox="0 0 187 186" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="...there`s a lot of coordinates..." fill="#4285F4"/>
  <circle cx="93" cy="93" r="88" stroke="#4285F4" stroke-width="10"/>
</svg>

我需要更改“路径”内的“填充”颜色和“圆圈”内的“描边”颜色。我试图让它像这样（删除“路径”内的“填充”和“圆圈”内的“笔划”并将其移至“svg”）：

<svg width="187" height="186" viewBox="0 0 187 186" fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="...there`s a lot of coordinates..." />
  <circle cx="93" cy="93" r="88" stroke-width="10"/>
</svg>

并像这样使用它：

import {ReactComponent as LogOutIcon} from "../images/logOutConfirmIcon.svg";

<LogOutIcon stroke={"#c00000"} fill={"#c00000"} />

它适用于笔画，但它也填充了图标内的所有空白空间。

【问题讨论】：

需要您未包含的d-path 来评估您的问题。

标签： reactjs svg

【解决方案1】：

所以我刚刚创建了一个单独的组件，它返回一个带有 props 作为值的 svg：

const LogOutConfirmIcon = (props) => {
    return (
        <svg width="187" height="186" viewBox="0 0 187 186" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fillRule="evenodd" clipRule="evenodd" d="...there`s a lot of coordinates..." fill={props.color} />
            <circle cx="93" cy="93" r="88" stroke={props.color} strokeWidth="10"/>
        </svg>
    );
};

【讨论】：