How do I add color to my svg image in react

I use this approach to avoid the need of creating a React component for each icon. As the docs say you can import the SVG file as a react component.

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

If you want to change the fill property you have to set your SVG fill‘s value to current then you can use it like this:

<svg fill="current" stroke="current" ....> ... </svg>

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo fill="red" stroke="green"/>
  </div>
);