12

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?

Gal Shtengel
  • 135
  • 1
  • 1
  • 6

5 Answers5

15

Try:

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

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

<img src={logo} />
ljsb
  • 318
  • 2
  • 6
  • @GalShtengel Generally, importing static assets results in a module and not a react component. The webpack makes it possible to import svgs as react components, but I am not sure about its bundler and the proper configurations. You can take a look at: https://www.pluralsight.com/guides/how-to-load-svg-with-react-and-webpack – ljsb Jun 03 '20 at 16:51
4

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.

tcanbolat
  • 411
  • 6
  • 10
2

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?

trig79
  • 384
  • 3
  • 12
  • saved me, thanks! Same ids confused browser to render one image in multiple svgs, where ids were the same. Do you have any idea why ids override each other if they are present in separate svg elements? – Oleksandr Oliynyk Jun 08 '21 at 15:01
0

You could do it like so

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}
export default Header;
Monkey D Luffy
  • 21
  • 4
0

I checked, only create-react-app could use SVG as a component

https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

Note: this feature is available with react-scripts@2.0.0 and higher, and react@16.3.0 and higher.

iversonLv
  • 35
  • 6
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 20 '22 at 08:05
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/30862555) – DevAddict Jan 24 '22 at 12:48