ryanzec ryanzec - 11 months ago 398
React JSX Question

SVG use tag and ReactJS

So normally to include most of my SVG icons that require simple styling, I do:

<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>


Now I have been playing with ReactJS as of late evaluating it as a possible component in my new front-end development stack however I noticed that in its list of supported tags/attributes, neither
use
or
xlink:href
are supported.

Is it possible to use svg sprites and load them in this way in ReactJS?

Answer Source

React doesn’t support all SVG tags as you say, there is a list of supported tags here. They are working on wider support, f.ex in this ticket.

A common workaround is to inject HTML instead for non-supported tags, f.ex:

render: function() {
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}