Search code examples
reactjssvg

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?

Solution

  • Try:

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

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

    <img src={logo} />