Use SVG tag and ReactJS

Question

So, 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 played with ReactJS, as he recently rated it as a possible component in my new developer stack, but I noticed that not use or xlink:href supported in its list of supported tags / attributes.

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

Answer 1

September 2018 Update : This solution is deprecated, instead read Jones answer .

-

React deer skin support all SVG tag, as you say, there is a list of supported tags here . They are working on broader support, for example, on this ticket .

The usual workaround is to enter HTML for unsupported tags instead, for example:

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

Answer 2

MDN says xlink:href deprecated in favor of href . You should be able to use the href attribute directly. The example below includes both versions.

Starting with React 0.14 , xlink:href is available through React as a property of xlinkHref . This is referred to as one of the “notable improvements” in the 0.14 release notes .

 <!-- REACT JSX: --> <svg> <use xlinkHref='/svg/svg-sprite#my-icon' /> </svg> <!-- RENDERS AS: --> <svg> <use xlink:href="/svg/svg-sprite#my-icon"></use> </svg> 

Update 2018-06-09: added information about xlink:href href vs xlink:href and an updated example that includes both. Thanks @devuxer

Update 3 : At the time of writing, the React master SVG properties can be found here .

Update 2. It seems that all svg attributes should now be accessible through reactions (see Combined svg PR attribute ).

Update 1 : you can follow the svg issue on GitHub for additional SVG support. There are developments in the works.

Demo version:

 const svgReactElement = ( <svg viewBox="0 0 1340 667" width="100" height="100" > <image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/> { /* Deprecated xlink:href usage */ } <image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/> </svg> ); var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement); document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml); ReactDOM.render(svgReactElement, document.getElementById('render-result') ); function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script> <h2>Render result of rendering:</h2> <pre>&lt;svg viewBox=&quot;0 0 1340 667&quot; width=&quot;100&quot; height=&quot;100&quot; &gt; &lt;image width=&quot;667&quot; height=&quot;667&quot; href=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt; { /* Deprecated xlink:href usage */ } &lt;image width=&quot;667&quot; height=&quot;667&quot; x=&quot;673&quot; xlinkHref=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt; &lt;/svg&gt;</pre> <h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2> <pre id="render-result-html"></pre> <h2><code>ReactDOM.render()</code> output:</h2> <div id="render-result"></div> 

Answer 3

If you encounter xlink:href , you can get the equivalent in ReactJS by removing the colon and camel of the added text: xlinkHref .

In SVG, you are likely to use other namespace tags, such as xml:space , etc. The same rule applies to them (i.e. xml:space becomes xmlSpace ).

Answer 4

As Jon Surrell said in response, usage tags are now used. If you are not using JSX, you can implement it as follows:

 React.DOM.svg( { className: 'my-svg' }, React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' ) ) 

Answer 5

I created a little helper that works around this problem: https://www.npmjs.com/package/react-svg-use

npm i react-svg-use -S , then just

 import Icon from 'react-svg-use' React.createClass({ render() { return ( <Icon id='car' color='#D71421' /> ) } }) 

and then the following markup will be created

 <svg> <use xlink:href="#car" style="fill:#D71421;"></use> </svg> 

Answer 6

Just use href . It worked for me. for React JS