React - Ability To Control Fill Color Of An Svg Through Props

I have a SVG, here called 'example.svg', that's being called and created as a component, like so: import { ReactComponent as Example } from './example.svg'; import styles from './i

Solution 1:

So did I understand correctly that this SVG will be rewritten as a React component? (which I'd probably do unless some important reasons). CSS actually has currentColor key value for a color property, so you can controll the color from outside, i.e.:

.svg-container {
  color: black; // or whatever color really
}

.st4 {
  fill: currentColor;
}

Solution 2:

I would recommend actually putting the SVG into your code and passing it in as a prop:

import { ReactComponentasExample } from'./example.svg';
import styles from'./index.module.css';

constExampleImg = ({ ...otherProps }) => (
  <ExampleclassName={styles.image} {...otherProps}><svg {...}><style>{`
      .st1{${props.fill}} 
      `}
      </style></svg></Example>
);

exportdefaultExampleImg;