ryanzec ryanzec - 1 month ago 48x
React JSX Question

SVG use tag and ReactJS

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

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

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
are supported.

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


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