Going the other direction

Question

Going the other direction

Closed this issue 3 years ago · 2 comments

Hi, I want to use this package to inline svgs with Webpack asset modules.

When I render them, though, I want to take the data URI and convert it back to plain SVG data so I can dangerouslySetInnerHTML. This way I can control things like the fill color with CSS.

Any suggestions on how to achieve that?

Answer 1 · 2021-09-11T18:09:59.000Z

Nvm, react-inlinesvg does this for me:

<InlineSVG src={src} />

src can be literally anything, including a remote URL or a data URI. Very nice. Thanks for this nice script.

Answer 2 · 2021-09-11T19:28:42.000Z

Nice to see you found a solution. If you or anyone else viewing this issue are curious how to do it vanilla, I’m pretty sure reversing the output is doable through decodeURIComponent().