If I pass color props to svg component then color of svg is not changing in React

Question

I have the add new svg component and its code looks like this:

import * as React from 'react';

function SvgAddnew(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg width="1em" height="1em" viewBox="0 0 14 14" {...props}>
      <defs>
        <clipPath id="addnew_svg__a">
          <path d="M0 0h14v14H0z" />
        </clipPath>
      </defs>
      <g
        data-name="\u0421\u0433\u0440\u0443\u043F\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C 1379"
        fill="none"
        stroke="#fff"
        strokeLinecap="round"
        strokeWidth={1.7}
        clipPath="url(#addnew_svg__a)"
      >
        <path data-name="\u041B\u0438\u043D\u0438\u044F 147" d="M7 2v10" />
        <path data-name="\u041B\u0438\u043D\u0438\u044F 148" d="M12 7H2" />
      </g>
    </svg>
  );
}

export default SvgAddnew;

And I use that component like this: <SvgAddnew width={12} height={12} onClick={onClick} color="#C4C4C4" /> but color remains white instead of #C4C4C4

Answer 1

try this:

stroke={props.color || "#fff"}