Convertidor SVG a JSX - Convertir SVG a Componente React Online
Convierte marcado SVG a componentes React JSX, TSX o React Native al instante. Optimiza atributos SVG y genera código React listo para copiar.
Preguntas Frecuentes
Que es un convertidor de SVG a JSX?
Un convertidor de SVG a JSX transforma el marcado SVG estandar en sintaxis JSX que las aplicaciones React pueden usar. Esto incluye convertir atributos como 'class' a 'className', cambiar atributos con guiones a camelCase (por ejemplo, 'stroke-width' a 'strokeWidth') y convertir estilos en linea a objetos JavaScript.
Por que necesito convertir SVG a JSX para React?
React usa JSX, que tiene requisitos de sintaxis diferentes al HTML estandar. Los atributos SVG como 'class' y 'stroke-width' necesitan convertirse a 'className' y 'strokeWidth'. Los estilos en linea deben convertirse en objetos JavaScript. Sin conversion, React lanzara advertencias o errores.
Como convierto SVG a JSX?
Simplemente pega tu codigo SVG en el campo de entrada o arrastra y suelta un archivo SVG. El convertidor lo transformara automaticamente a JSX valido. Luego puedes copiar la salida directamente en tu componente React. Opcionalmente, activa 'Envolver en Componente' para generar un componente React completo.
Que hace la optimizacion de SVG?
La optimizacion de SVG elimina datos innecesarios de tus archivos SVG, incluyendo metadatos del editor (de herramientas como Illustrator, Figma o Sketch), declaraciones XML, comentarios y atributos vacios. Esto reduce el tamano del archivo sin afectar como se ve el SVG.
Estan seguros mis datos SVG?
Si, absolutamente. Esta herramienta procesa todo en tu navegador - tu codigo SVG nunca sale de tu computadora. No hay cargas al servidor, no hay recopilacion de datos y no hay llamadas a APIs externas. Esto lo hace seguro para usar con iconos propietarios y activos de diseno sensibles.
Puedo convertir SVG para React Native?
Si! Selecciona la pestana 'React Native' para generar codigo compatible con la libreria react-native-svg. Esto convierte las etiquetas SVG a sus equivalentes de React Native (por ejemplo, 'svg' se convierte en 'Svg', 'path' se convierte en 'Path') y ajusta los atributos correspondientemente.
Soporta TypeScript?
Si. Selecciona la pestana 'TSX' para generar componentes React correctamente tipados con interfaces TypeScript. El componente generado incluira declaraciones FC (Function Component) apropiadas y tipos de props.
Ejemplos de Codigo
// SVG to JSX attribute conversion
const svgAttrToJsx = {
'class': 'className',
'stroke-width': 'strokeWidth',
'fill-rule': 'fillRule',
'clip-path': 'clipPath',
};
// Convert hyphenated to camelCase
const toCamelCase = (str) =>
str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
// Example usage
const attr = 'stroke-width';
const jsxAttr = svgAttrToJsx[attr] || toCamelCase(attr);
console.log(jsxAttr); // 'strokeWidth'