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 { ReactComponent as Example } from './example.svg';
import styles from './index.module.css';

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

export default ExampleImg;