Fill for external SVG file in React

Question

It doesn't seem to be possible so far to control the SVG elements that are stored in a separate file. I thought maybe with WebPack and npm modules it should be possible yet can't find a simple or convenient solution. Is it possible to import element like this?

import icon from "./icons/user.svg"

<icon fill="red" />

I don't understand why it is so hard to work with SVG here, or why can't I find enough information on the topic. Maybe I am doing this wrong? Are there better ways to manage a lot of icons for a React website? I need will be using quite a few, like social networks stuff and similar.

Answer 1

If you use Create React App, then the easiest solution is to import SVG as a React component

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

const View = () => <User />;

See more in the docs: https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs