wake-up-neo.net

SVG verwenden Tag und ReactJS

Um die meisten meiner SVG-Symbole, die ein einfaches Styling erfordern, zu verwenden, mache ich normalerweise Folgendes:

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

Jetzt habe ich mit ReactJS gespielt, als ich es in letzter Zeit als mögliche Komponente in meinem neuen Frontend-Entwicklungsstack ausgewertet habe. 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?

83
ryanzec

Update September 2018: Diese Lösung ist veraltet, lesen Sie stattdessen die Antwort von Jon .

-

React unterstützt nicht alle SVG-Tags, wie Sie sagen, es gibt eine Liste der unterstützten Tags hier . Sie arbeiten an einer breiteren Unterstützung, z. B. in dieses Ticket .

Eine häufige Problemumgehung ist das Einfügen von HTML statt für nicht unterstützte Tags, z.

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

MDN sagt, dass xlink:hrefwird nicht mehr empfohlen zugunsten von href. Sie sollten das href-Attribut direkt verwenden können. Das folgende Beispiel enthält beide Versionen.

Ab React 0.14 ist xlink:href über React als Eigenschaft xlinkHref verfügbar. Es wird als eine der "bemerkenswerten Verbesserungen" in den 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 2018-06-09: Informationen zu href vs. xlink:href-Attributen hinzugefügt und Beispiel aktualisiert, um beides aufzunehmen. Danke@devuxer

Update 3: Zum Zeitpunkt des Schreibens sind die Eigenschaften des SVG-Reaktormasters hier zu finden.

Update 2: Es scheint, dass alle svg-Attribute jetzt über den Einsatz von reagieren sollen (siehe zusammengeführtes svg-Attribut PR .

Update 1: Möglicherweise möchten Sie das svg-bezogene Problem auf GitHub im Auge behalten, um zusätzliche Supportanfragen für SVG-Support zu erhalten. Es gibt Entwicklungen in den Werken.

Demo:

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>

209
Jon Surrell

Wenn Sie auf xlink:href stoßen, können Sie die Entsprechung in ReactJS erhalten, indem Sie den Doppelpunkt entfernen und den hinzugefügten Text mit camelcasing versehen: xlinkHref.

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

5
HoldOffHunger

Wie bereits in der Antwort von Jon Surrell gesagt, werden jetzt Use-Tags unterstützt. Wenn Sie JSX nicht verwenden, können Sie es folgendermaßen implementieren:

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

Ich habe einen kleinen Helfer erstellt, der dieses Problem löst: https://www.npmjs.com/package/react-svg-use

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

import Icon from 'react-svg-use'

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

daraufhin wird das folgende Markup generiert

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