SVGs can be imported and used directly as a React component in your React code. The image is not loaded as a separate file, instead, it’s rendered along the HTML. A sample use-case would look like this: import React from ‘react’; import {ReactComponent as ReactLogo} from ‘./logo.

How import SVG icon into react?

Import SVG as a React Component (Inline SVG)

1. import { ReactComponent as MyIcon } from “./icon.svg”
2. import myIconUrl, { ReactComponent as MyIcon } from “./icon.svg”
3. <MyIcon /> <MyIcon className=”someClassThatWillBeUsedInCSS” alt=”icon” />

3.02.2019

How do I use SVG in styled components?

The styled components way.
…
The gotchas

1. You should remove any id props from every svg element.
2. Watch out for props like fill-rule and stroke-width. …
3. Some icons use style definitions instead of props (fill, stroke, …), in which case, you should convert the style definitions into props.

24.04.2020