[Bug] Doesn't work with imported SVGs

[OwenMelbz]

Hi,

I'm having trouble getting the plugin to work with imported SVGs e.g.

import Logo from './images/logo.svg';

However it works when the SVG is inlined.

You can view a demo of the problem here:

[elderapo]

Seems like it's not possible to iterate over react children (nested elements of svg) for imported svgs. Not sure what can be done about that.

[MacDue]

It's a hack but I've found a workaround for this.

import MySVG from '-!react-svg-loader!./mysvg.svg';

// Little hack around the imported svg to get at the SVG react/jsx elements.
const UniqueSVG = ({svg}) => (
  <SVGUniqueID>
    {React.createElement(svg).type({ styles: {} })}
  </SVGUniqueID>)

// ...Then somewhere in your render:
<UniqueSVG svg={MySVG}/>

That's it.

[elderapo]

I don't use this library anymore and have no interest in fixing/updating it. If someone creates a pull request with a working fix I will be willing to merge it.

[rdourado]

I have another “hack” suggestion that worked for me.
In my case, I'm using @svgr/webpack to import the SVG files, and it looks like its default template protects SVG children somehow.
To get around it, just call the component as a function instead of using JSX. Like this:

import { SVGUniqueID } from 'react-svg-unique-id'
import myicon from './myicon.svg'

const MyIcon = (props) => {
  return <SVGUniqueID>{myicon(props)}</SVGUniqueID>
}