Etiqueta de uso de SVG y ReactJS

sprite

Question

Normalmente, para incluir la mayoría de mis iconos de SVG que requieren un estilo simple, hago:

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

Ahora que he estado jugando con ReactJS últimamente como un posible componente en mi nueva pila de desarrollo de aplicaciones para el usuario, noté que en su lista de etiquetas / atributos compatibles, ni use ni xlink:href son compatibles.

¿Es posible usar svg sprites y cargarlos de esta manera en ReactJS?

Answer 1

A partir de React 0.14 , xlink:href está disponible a través de React como propiedad xlinkHref . Se menciona como una de las "mejoras notables" en las notas de la versión para 0.14.

<!-- REACT JSX: -->
<svg>
  <use xlinkHref=''/svg/svg-sprite#my-icon'' />
</svg>

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

Actualización 3 : al momento de escribir, las propiedades de SVG maestro de React se pueden encontrar here .

Actualización 2 : parece que todos los atributos svg ahora deberían estar disponibles a través de reaccionar (ver atributo svg fusionado PR ).

Actualización 1 : es posible que desee mantenerse al tanto del problema relacionado con svg en GitHub para el aterrizaje de soporte de SVG adicional. Hay desarrollos en las obras.

Manifestación:

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 2

Como ya se dijo en la respuesta de Jon Surrell, las etiquetas de uso son compatibles ahora. Si no está utilizando JSX, puede implementarlo así:

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

Answer 3

Creé un pequeño ayudante que soluciona este problema: https://www.npmjs.com/package/react-svg-use

primera npm i react-svg-use -S luego simplemente

import Icon from ''react-svg-use''

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

y esto generará el siguiente marcado

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

Answer 4

React no admite todas las etiquetas SVG como dices, aquí hay una lista de etiquetas compatibles. Están trabajando en un soporte más amplio, f.ex en este ticket .

Una solución común es inyectar HTML en su lugar para las etiquetas no admitidas, f.ex:

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

Answer 5

Si encuentra xlink:href , entonces puede obtener el equivalente en ReactJS eliminando los dos puntos y el texto agregado en xlinkHref : xlinkHref .

Probablemente usarás otras etiquetas de espacio de nombres en SVG, como xml:space , etc. La misma regla se aplica a ellas (es decir, xml:space convierte en xmlSpace ).