Unable to import SVG directly as React components

[benknight]

Describe the bug
Unable to import SVG directly as React components.

To reproduce
Steps to reproduce the behavior:

1. import { ReactComponent as Icon } from './icon.svg';
2. See error:

Failed to compile.

./src/icon.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/icon.svg)
TypeError: Cannot read property 'tagName' of null

Expected behavior
It should work equivalent to react-scripts

[SimonHoiberg]

Hi @benknight Thank you for creating this issue.

I am not able to reproduce this. When I try, it works out-of-the-box, just as expected.

Can you provide some more information? If you can post a code snippet on how you use the SVG in React, and a code snippet of how the SVG file looks like.

Thank you.

[gverduci]

Hi, same problem here.

I solved using svgr client to create a component to use instead of the svg file:

npx svgr --icon ./logo.svg > ./SvgLogo.js

Giuseppe

[superandrew]

I have the same exact problem. In fact I am unable to import svg in direflow after migrating an app in which svg worked as expected.

if I try this way import { ReactComponent as logo } from "../assets/img/logo.svg" I have the same error of @benknight

[kelvinwongg]

@SimonHoiberg I have the same problem import SVG, below is my code snippet:

...

import { ReactComponent as svgArrow } from '../assets/images/arrow.svg';

const Card = (props) => {
	return (
		<Styled styles={ styles }>
			<div className="card">
				<svgArrow />
			</div>
		</Styled>
	);
};

...

This is the error message response:

.../assets/images/arrow.svg) TypeError: Cannot read property 'tagName' of null