Util Monster
Gratuit
Collez du balisage SVG pour le convertir en JSX que vous pouvez intégrer directement dans un composant React. Il met les attributs en camelCase (class→className), transforme la chaîne style en objet et supprime les commentaires ainsi que DOCTYPE.
La syntaxe React (JSX) diffère légèrement de celle de HTML/SVG. Les attributs avec des tirets (stroke-width) doivent être écrits en camelCase (strokeWidth), class devient className, et style doit être un objet JavaScript plutôt qu'une chaîne. Cet outil convertit automatiquement ces différences, afin qu'une icône SVG exportée par un designer puisse être collée directement dans un composant React.
Il mappe class→className et for→htmlFor, met en camelCase les attributs avec des tirets comme stroke-width et fill-opacity, convertit les attributs avec espace de noms comme xlink:href en xlinkHref, et laisse les attributs data-/aria- inchangés. style="fill:red;stroke-linecap:round" devient l'objet style={{ fill: 'red', strokeLinecap: 'round' }}, tandis que les commentaires, DOCTYPE et la déclaration XML sont supprimés.
Plutôt que des expressions régulières, cet outil analyse réellement le SVG avec le DOMParser intégré du navigateur, puis le sérialise à nouveau, de sorte que la structure imbriquée et les attributs sont gérés correctement. Tout s'exécute dans votre navigateur et le code n'est jamais envoyé à un serveur. Après avoir collé le résultat dans un composant, ajustez-le selon vos besoins — par exemple, remontez width/height en props ou remplacez fill par "currentColor".