React SVG import as a Component does not render

Question

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?

Answer 1

Try:

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

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

<img src={logo} />

Answer 2

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.