SVG a Jsx

Transforma el marcado SVG sin procesar en un componente React listo para pegar. Reescribe los atributos SVG en props camelCase compatibles con React (class a className, stroke-width a strokeWidth, xlink:href a xlinkHref y muchos más), convierte las cadenas de estilo inline en objetos de estilo de React, cierra automáticamente los elementos void y las formas SVG, y elimina el espacio de nombres predeterminado xmlns="http://www.w3.org/2000/svg".

1. Pega tu marcado SVG (debe contener <svg> y </svg>) en el cuadro de entrada 2. Haz clic en Prettify para sangrar automáticamente el marcado antes de convertirlo (opcional) 3. Establece un Nombre de Componente (el valor predeterminado es SvgComponent, solo caracteres alfanuméricos y guion bajo) 4. Activa o desactiva la directiva "use client" y/o el hook useMemo según sea necesario 5. Haz clic en Convert para generar el componente JSX y cópialo al portapapeles

El campo Nombre de Componente controla el identificador exportado. Con la casilla "use client" activada, la salida lleva el prefijo "use client" en su propia línea y se exporta como default sin props; en caso contrario, se exporta como un const con nombre que acepta props y devuelve svg. Con useMemo activado, el marcado SVG se envuelve en useMemo(() => (...), []). La entrada debe contener tanto <svg como </svg> o la conversión se rechazará con un error de SVG no válido.