Блог

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"} />
 

И это сработало для обводки, но оно также заполняет все пустое пространство внутри значка.

Итак, я просто создал отдельный компонент, который возвращает 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>
    );
};