web-dev-qa-db-fra.com

SVG utilise tag et ReactJS

Donc normalement pour inclure la plupart de mes icônes SVG qui nécessitent un style simple, je fais:

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

Je joue maintenant avec ReactJS depuis peu pour l’évaluer en tant que composant possible dans ma nouvelle pile de développement front-end, mais j’ai remarqué que dans sa liste de balises/attributs pris en charge, ni use ni xlink:href ne sont supportés.

Est-il possible d'utiliser des sprites svg et de les charger de cette manière dans ReactJS?

svgspritereactjs
83
ryanzec

Mise à jour septembre 2018: cette solution est obsolète, lisez la réponse de Jon à la place.

-

React ne prend pas en charge tous les tags SVG comme vous le dites, il existe une liste des tags supportés ici . Ils travaillent sur un support plus large, par exemple dans ce ticket .

Une solution courante consiste à injecter du code HTML à la place pour les balises non prises en charge, f.ex:

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

Si vous rencontrez xlink:href, vous pouvez obtenir l'équivalent dans ReactJS en supprimant les deux points et en camelcant le texte ajouté: xlinkHref.

Vous utiliserez probablement éventuellement d’autres tags d’espace de nommage dans SVG, tels que xml:space, etc. La même règle s’applique à eux (c’est-à-dire que xml:space devient xmlSpace).

5
HoldOffHunger

Comme déjà dit dans la réponse de Jon Surrell, les balises use sont maintenant supportées. Si vous n'utilisez pas JSX, vous pouvez l'implémenter comme ceci:

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

J'ai créé un petit assistant qui résout ce problème: https://www.npmjs.com/package/react-svg-use

d'abord npm i react-svg-use -S puis simplement

import Icon from 'react-svg-use'

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

et cela générera alors le balisage suivant

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