score:13

Accepted answer

Try:

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

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

<img src={logo} />

score: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;

score: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.

score: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?

score: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.


Related Query

More Query from same tag