How to pass parameters to my SVG Component

SvgValve3DCommon4.tsx

import * as React from "react";

function SvgValve3DCommon4(props: React.SVGProps<SVGSVGElement>) {
  return (
      <svg viewBox="0 0 100 100" {...props}>
        <svg {...props}>
          <path fill="none" d="M0 0h100v100H0z" />
          <path
              fill="mainColor"
              d="M0 40.5h5.667v19H0zM94.333 40.5H100v19h-5.667z"
          />
          <path fill="mainColor" d="M70 42h30v16H70zM0 42h30v16H0z" />
          <path
              fill="mainColor"
              d="M81.5 68.75c-.459 0-.918-.105-1.342-.316L50 53.354l-30.158 15.08A3.001 3.001 0 0115.5 65.75v-31.5a3.001 3.001 0 014.342-2.683L50 46.646l30.158-15.079A2.998 2.998 0 0184.5 34.25v31.5a3 3 0 01-3 3z"
          />
          <circle fill="mainColor" cx={50} cy={50} r={16} />
          <g fill="#009245">
            <path d="M84.5 43H100v14H84.5zM0 43h15.5v14H0zM81.5 67.75c-.306 0-.612-.07-.895-.211L50 52.236 19.395 67.539A1.999 1.999 0 0116.5 65.75v-31.5a1.999 1.999 0 012.895-1.789L50 47.764l30.605-15.303a2 2 0 012.894 1.789v31.5a2 2 0 01-1.999 2z" />
            <circle cx={50} cy={50} r={15} />
          </g>
          <g fill="#96D48D">
            <path d="M84.5 45H100v10H84.5zM0 45h15.5v10H0zM18.5 66.25a.503.503 0 01-.5-.5v-31.5a.5.5 0 01.723-.447l31.5 15.75a.5.5 0 01.001.894l-31.5 15.75a.505.505 0 01-.224.053z" />
            <path d="M81.5 66.25a.508.508 0 01-.224-.053l-31.5-15.75a.5.5 0 010-.894l31.5-15.75a.5.5 0 01.724.447v31.5a.503.503 0 01-.5.5z" />
          </g>
          <g fill="#FFF">
            <path d="M84.5 46.5H100v7H84.5zM0 46.5h15.5v7H0zM19 35.059v29.882L48.882 50zM51.118 50L81 64.941V35.059z" />
          </g>
        </svg>
      </svg>
  );
}

export default SvgValve3DCommon4;

index.tsx

...

render() {
    return <div>
      <SvgValve3DCommon4 mainColor={'red'} /> //How to pass it?
    </div>;
  }

I try to use jsx, and parameters just not work

render result

<svg viewBox="0 0 100 100" mainColor="red">
  <svg mainColor="red">
    <path fill="none" d="M0 0h100v100H0z"></path>
    <path fill="mainColor" d="M0 40.5h5.667v19H0zM94.333 40.5H100v19h-5.667z"></path>
    <path fill="mainColor" d="M70 42h30v16H70zM0 42h30v16H0z"></path>
    <path fill="mainColor"
      d="M81.5 68.75c-.459 0-.918-.105-1.342-.316L50 53.354l-30.158 15.08A3.001 3.001 0 0115.5 65.75v-31.5a3.001 3.001 0 014.342-2.683L50 46.646l30.158-15.079A2.998 2.998 0 0184.5 34.25v31.5a3 3 0 01-3 3z">
    </path>
    <circle fill="mainColor" cx="50" cy="50" r="16"></circle>
    <g fill="#009245">
      <path
        d="M84.5 43H100v14H84.5zM0 43h15.5v14H0zM81.5 67.75c-.306 0-.612-.07-.895-.211L50 52.236 19.395 67.539A1.999 1.999 0 0116.5 65.75v-31.5a1.999 1.999 0 012.895-1.789L50 47.764l30.605-15.303a2 2 0 012.894 1.789v31.5a2 2 0 01-1.999 2z">
      </path>
      <circle cx="50" cy="50" r="15"></circle>
    </g>
    <g fill="#96D48D">
      <path
        d="M84.5 45H100v10H84.5zM0 45h15.5v10H0zM18.5 66.25a.503.503 0 01-.5-.5v-31.5a.5.5 0 01.723-.447l31.5 15.75a.5.5 0 01.001.894l-31.5 15.75a.505.505 0 01-.224.053z">
      </path>
      <path
        d="M81.5 66.25a.508.508 0 01-.224-.053l-31.5-15.75a.5.5 0 010-.894l31.5-15.75a.5.5 0 01.724.447v31.5a.503.503 0 01-.5.5z">
      </path>
    </g>
    <g fill="#FFF">
      <path d="M84.5 46.5H100v7H84.5zM0 46.5h15.5v7H0zM19 35.059v29.882L48.882 50zM51.118 50L81 64.941V35.059z"></path>
    </g>
  </svg>
</svg>

the mainColor param not work in browser

index.js:1 Warning: React does not recognize the `mainColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `maincolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[mqzabin]

And it makes sense as I don’t want to pass my custom prop to the root of svg. Any tips how to adjust custom template?

My files using custom props and Material UI theme provider:

svgr-config.json

{
    "typescript": true,
    "replaceAttrValues": {
        "#e53935": "{theme.palette.primary.main}",
        "#ffc107": "{theme.palette.secondary.main}",
        "#131313": "{theme.palette.text.hint}"
    }
}

svgr-template.js

function defaultTemplate(
    { template },
    opts,
    { imports, interfaces, componentName, props, jsx, exports },
) {
    const plugins = ['jsx']
    if (opts.typescript) {
        plugins.push('typescript')
    }

    const typeScriptTpl = template.smart({ plugins })
    return typeScriptTpl.ast`${imports}
    ${interfaces}
    import SVGProps from './interfaces/props';
    import { useTheme } from '@material-ui/core';

    const ${componentName} = (props : SVGProps) : JSX.Element => {

        const theme = useTheme();

        return ${jsx};
    }
    ${exports}
    `
}
module.exports = defaultTemplate

./interfaces/props.ts (imported in svgr-template.js)

export default interface SVGProps extends React.SVGProps<SVGSVGElement> {
    className? : string;
};

command to generate the svg components

npx @svgr/cli --config-file ./svgr-config.json --template ./svgr-template.js -d <output folder> <.svg input folder>

[jiyarong]

npx @svgr/cli  --replace-attr-values "#006837={props.mainColor}"