How to Import SVG icons in React

Question

I wanted to import too many SVG icons in app & each icons required custom color through css, which is the easiest way to import to react? Importing to <img/> tag won't support the color change via css fill. Creating a .js component for each icon is too hard for 250+ icons. what is the other option ? Please help

import IconArrow from "./Arrow.svg";
import Circlearrowdownright from "./Arrow.js";

<img className="ico" src={IconArrow} />
<i className="ico"><Circlearrowdownright /></i>

https://codesandbox.io/s/svg-icon-3z0qu6

Answer 1

You can import and use it as React component directly:

import { ReactComponent as ExampleIcon} from './icons/ExampleIcon.svg';

<ExampleIcon className="css-class"/>