How to modify SVG in react - css

Question

I need change the color and scale the svg in react.
Using i can manipulate the width and height using a className like: "w-[10vw]", but can't change the color. On other hand, if i create a component for SVG, i don't know how to make scalar size using className.
code of my attempts:
<VectorBarSVG fill={theme ? '#61A0AF' : '#CECE25'} />
" />
Code of React Component SVG:
import * as React from 'react'
export interface IVectorBarSVGProps {
fill: string
}
export function VectorBarSVG({ fill }: IVectorBarSVGProps) {
return (
)
}

Answer 1

You may modify colors of an SVG by specifying "fill" and "stroke".
function Component() {
return (
<svg className="stroke-cyan-500 fill-blue-500">
<!-- ... -->
</svg>
);
}
When using TailwindCSS you must not dynamically assemble class names. This will not work:
function Component({color}) {
return (
<svg className={`stroke-${color} fill-${color}`}>
<!-- ... -->
</svg>
);
}
This is because TailwindCSS does not execute your programm. It scans your source code and generates a CSS file based on class names and expressions it recognized.
Instead, you should be hiding these details in your component and expose a more convenient interface.
function Component({isPrimary, isBig}) {
return (
<svg className={
(isPrimary ? "fill-blue-500" : "fill-gray-500")
+ " "
+ (isBig ? "w-96" : "w-24")
}>
<!-- ... -->
</svg>
);
}
// And use it like so:
<Component isPrimary />
<Component isBig />
One more thing, if your desired color changes aren't applied to the SVG, you are probably not applying your classes to the correct elements within that SVG.
For example, here's an SVG that contains a circle, a rectangle, and a line:
function Component() {
return (
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391">
<rect x="-70" y="-70" width="390" height="390"/>
<g>
<rect x="25" y="25" width="200" height="200" />
<circle cx="125" cy="125" r="75"/>
<line x1="50" y1="50" x2="200" y2="200" />
</g>
</svg>
)
}
To change the fill color of the circle, you would have to apply the class names to the circle element:
function Component() {
return (
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391">
<rect x="-70" y="-70" width="390" height="390"/>
<g>
<rect x="25" y="25" width="200" height="200" />
<circle cx="125" cy="125" r="75" className="fill-amber-500 stroke-blue-800"/>
<line x1="50" y1="50" x2="200" y2="200" />
</g>
</svg>
)
}