Da SVG a Jsx

Trasforma il markup SVG grezzo in un componente React pronto da incollare. Riscrive gli attributi SVG in props camelCase compatibili con React (class in className, stroke-width in strokeWidth, xlink:href in xlinkHref e molti altri), converte le stringhe di stile inline in oggetti di stile React, chiude autonomamente gli elementi void e le forme SVG e rimuove il namespace predefinito xmlns="http://www.w3.org/2000/svg".

1. Incolla il tuo markup SVG (deve contenere <svg> e </svg>) nella casella di input 2. Fai clic su Prettify per indentare automaticamente il markup prima della conversione (facoltativo) 3. Imposta un Nome Componente (predefinito SvgComponent, solo caratteri alfanumerici e underscore) 4. Attiva/disattiva la direttiva "use client" e/o l'hook useMemo secondo necessità 5. Fai clic su Convert per produrre il componente JSX e copialo negli appunti

Il campo Nome Componente controlla l'identificatore esportato. Con la casella "use client" attivata, l'output è preceduto da "use client" su una propria riga ed esportato come default senza props; in caso contrario viene esportato come const con nome che accetta props e restituisce svg. Con useMemo attivato, il markup SVG viene racchiuso in useMemo(() => (...), []). L'input deve contenere sia <svg sia </svg>, altrimenti la conversione viene rifiutata con un errore di SVG non valido.