SVG Verwendung Tag und ReactJS

Question

Also normalerweise die meisten meiner SVG-Symbole enthalten, die einfache Styling erfordern, das tue ich:

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

Jetzt habe ich mit ReactJS gespielt als in der letzten Zeit als eine mögliche Komponente Auswertung in meiner neuer Front-End-Entwicklungsstack Ich habe jedoch festgestellt, dass in der Liste der unterstützten Tags/Attribute weder use noch xlink:href unterstützt werden.

Ist es möglich, Svg Sprites zu verwenden und sie auf diese Weise in ReactJS zu laden?

Answer 1

React unterstützt nicht alle SVG-Tags, wie Sie sagen, es gibt eine Liste der unterstützten Tags here. Sie arbeiten an einer breiteren Unterstützung, zB in this ticket.

Eine gemeinsame Abhilfe ist, HTML zu injizieren, anstatt für nicht unterstützte Tags, f.ex: Reagieren Sie als Eigentum xlinkHref

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

Answer 2

Ab 0,14 Reagieren, xlink:href verfügbar über ist. Es wird als eine der "bemerkenswerten Verbesserungen" in der release notes für 0,14 erwähnt.

<!-- 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 3: Zum Zeitpunkt des Schreibens, Reaktion SVG Master Eigenschaften here gefunden werden kann.

Update 2: Es scheint, dass alle svg Attribute jetzt verfügbar sein sollten über reagieren (svg attribute PR verschmolzen sehen).

Update 1: Sie wollen für zusätzliche SVG-Unterstützung Landung ein Auge auf die svg related issue auf GitHub halten. Es gibt Entwicklungen in den Werken.

Demo:

const svgReactElement = (
 
    <svg 
 
    viewBox="0 0 667 667" 
 
    width="100" 
 
    height="100" 
 
    > 
 
    <image width="667" height="667" 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.0.0/umd/react.development.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom-server.browser.development.js"></script> 
 

 
<h2>Render result of rendering:</h2> 
 
<pre>&lt;svg 
 
    viewBox="0 0 667 667" 
 
    width="100" 
 
    height="100" 
 
&gt; 
 
    &lt;image width="667" height="667" 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

ich einen kleinen Helfer geschaffen, um dieses Problem funktioniert: https://www.npmjs.com/package/react-svg-use

erste npm i react-svg-use -S dann einfach

import Icon from 'react-svg-use' 

React.createClass({ 
    render() { 
    return (
     <Icon id='car' color='#D71421' /> 
    ) 
    } 
}) 

, und dies wird das folgende Markup

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

Answer 4

dann erzeugen, wie bereits gesagt, in Jon Surrell Antwort Verwenden-Tags werden jetzt unterstützt. Wenn Sie sich nicht mit JSX sind, können Sie es wie folgt implementieren:

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

Answer 5

Wenn Sie xlink:href auftreten, dann können Sie das Äquivalent in ReactJS erhalten durch den Darm entfernen und camelcase den zusätzlichen Text: xlinkHref.

Sie werden wahrscheinlich andere Namespace-Tags in SVG verwenden, wie xml:space, etc ..Die gleiche Regel gilt für sie (d. H. xml:space wird xmlSpace).