How can I change svg icon colors in React?

Question

Svg file:

<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>

I need to change "fill" color inside "path" and "stroke" color inside "circle". I tried to make it like this (deleted "fill" inside "path" and "stroke" inside "circle" and moved it up to "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>

And use it like this:

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

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

And it worked for the stroke but it fills all empty space inside the icon too.

The d-path you did not include is required to assess your issue. — Danny '365CSI' Engelman

nawkee nawkee · Accepted Answer · 2021-03-03T10:48:58

So I just created a separate component that returns an svg with props as values:

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>
    );
};

How can I change svg icon colors in React?

1 Answers