tanem / react-svg

:art: A React component that injects SVG into the DOM.

Home Page:https://npm.im/react-svg

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sometimes svg is not injected.

prlyons opened this issue · comments

I have the same svg that is add in multiple places in a web page using ReactSVG. Sometimes the svg is not injected and there is no error reported. I've tried adding afterInjection. Instead I get the following div where the element would have been.
<div data-src="Pub/Web/Icon/arrowDropDown.svg" src=""></div>

Any advice or is this a bug?

That data-src value looks like a reference to an SVG on your local filesystem? This library makes XHR requests for SVGs under the hood, so if the SVG can't be fetched that way then it will fail. You might want to consider an alternative approach if you don't need the XHR behaviour, e.g. react-svgr.

If you don't think that's the issue, can you please create an example of the failure I can look at? You can fork the basic usage CodeSandbox live example from the README for that 👍

From tanem/svg-injector#1061 (comment):

Sorry my code is behind a firewall so it is not available to run an example. I have a page where I use the same svg source in multiple places but sometimes the svg fails to be injected. Instead I get the following div.

<div data-src="Pub/Web/Icon/arrowDropDown.svg" src(unknown)></div>

If I perform an action to cause the svg container to render again the svg will show. I am running on a web server not locally. Any advice is appreciated.

For the reproduction I'm asking for, it can just be a relevant snippet of your code rather than your entire running app, which is why I'm suggesting forking the Basic Usage example from the docs. Even some snippets of your surrounding React code pasted in a comment here would help. There's only going to be so much I can do with limited info 🙏

Closing issue. I've found the problem upstream of ReactSVG.

In case it helps someone else: I was experiencing the same problem with some SVG's being injected and some not. For me it turned out the be the xmlns attribute that aws missing.