Conversor de SVG a React/JSX

El Conversor de SVG a React JSX transforma archivos SVG sin procesar en componentes de React reutilizables. Está diseñado para desarrolladores que necesitan componentes de iconos más limpios, marcas, ilustraciones de productos y activos de sistemas de diseño sin tener que corregir manualmente cada atributo de SVG. Pega el marcado SVG o sube un archivo .svg en formato UTF-8, elige las opciones de React que necesites y luego copia el componente generado en tu proyecto.

Cómo usar

1. Pegar o subir SVG. Pega un archivo SVG completo en el editor o sube un archivo .svg en formato UTF-8.
2. Nombrar el componente. Introduce un nombre de componente de React en PascalCase, como AlertIcon o BrandMark.
3. Elegir opciones de React. Selecciona TypeScript, forwardRef, React.memo, accesibilidad de título, conversión de estilo, desinfección y opciones de propagación de props.
4. Convertir a JSX. Haz clic en Convertir a componente de React para generar código JSX listo para copiar.
5. Revisar y copiar. Revisa el resumen de la conversión, las advertencias y el código generado antes de copiarlo en tu proyecto de React.

Qué maneja el conversor

Consejos para mejores componentes de SVG en React

Conserva el viewBox original siempre que sea posible, ya que controla cómo se escala el SVG. Para los sistemas de iconos, usar width="1em" y height="1em" permite que el icono herede el tamaño del texto, al mismo tiempo que permite a quienes lo utilicen anular las dimensiones mediante props. Utiliza un nombre de componente descriptivo en PascalCase, mantén los SVG decorativos accesibles con aria-hidden cuando sea apropiado y utiliza la prop de título para los iconos significativos que transmitan información.

Preguntas frecuentes

¿Qué cambia este conversor de SVG a React?

Analiza el XML de SVG y reescribe los atributos de SVG en JSX compatible con React, incluyendo className, atributos SVG en camelCase, objetos de estilo opcionales, props, forwardRef, accesibilidad de título y sintaxis de exportación.

¿Puedo subir un archivo SVG?

Sí. Puedes subir un archivo .svg en formato UTF-8 o pegar el marcado SVG. Los archivos subidos se leen como texto y se convierten en JSX en el servidor.

¿Desinfecta el código SVG?

La desinfección está activada de forma predeterminada. El conversor elimina las etiquetas de script, los controladores de eventos en línea y los enlaces javascript: para que el componente generado sea más seguro de revisar antes de su uso.

¿Por qué convertir los atributos de estilo en objetos?

React espera que la prop style sea un objeto al escribir JSX. Convertir cadenas de estilo en objetos hace que la salida se compile limpiamente y mantiene los nombres de las propiedades CSS en camelCase.

¿Cuál es el mejor formato para el nombre de un componente?

Usa PascalCase como AlertIcon o BrandMark. El conversor limpia los caracteres no válidos y se asegura de que el resultado comience con un identificador de componente de React válido.