ryanzec ryanzec - 3 months ago 140
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

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 }} />;
}