React SVG import as a Component does not render

I'm having a problem with importing SVG files in React JS.

import { ReactComponent as Logo} from '../logo.svg'

i don't know why but in some components <Logo /> will render correctly while in other components it doesn't show, the SVG is there when i use inspect and it does take the space it needs but the SVG is blank / empty.

anyone else encountered this issue?

Try:

import { default as logo } from '../logo.svg';

and use as source in a node of type img, like this:

<img src={logo} />

I had the same exact issue and wrapping the logo component in an svg tag or div made it render on to the screen for me. I can also change the SVG color by setting it from the logo as well.

import { ReactComponent as Logo} from '../logo.svg'

<svg><Logo fill="blue" width="100%" height="100%" /></svg>

// or...

<div><Logo fill="blue" width="100%" height="100%" /></div>

Without the <svg> or <div> tag wrapped around it, it was rendering a blank image, taking up the space and all but no visuals. Once I added the wrapper tag around it, it worked. I like this approach since you can dynamically change the SVG styling based on user input.

I had same problem, for some it was how i imported them so I resolved this by using:

import {ReactComponent as Icon} from 'pathtoyourfile.svg then use as: <Icon />

Other times however, and I have fallen foul to this a few times, SVG's often have similar class and id names, so if you check the file you might see clip0, image0, pattern0 etc. If you have multiple svg's good chance the ID's and Class names are clashing and are overriding each other. For me the easiest solution was to change the naming convention manually, not sure if a more automated solution exists?