SVG a JSX en línea — Generador de componente React
Convierte SVG en un componente React con className y atributos camelCase. Export TypeScript opcional.
Notas para desarrolladores
Los bloques <style> incrustados y las sprite sheets no están soportados en v1. xlink:href y xmlns se convierten a nombres amigables para JSX. Revisa la salida antes de meterla en un design system. Combínalo con validate-svg para detectar viewBox o title faltantes.
Opciones
- Nombre del componente
- Define el identificador de la función React en el JSX generado (p. ej. SvgIcon).
- Exportación predeterminada
- Activado: emite export default function …; desactivado: una exportación con nombre.
- TypeScript
- Añade una firma de props tipada (atributos SVGSVGElement) para un drop-in TSX.
Cuándo elegir esta herramienta
Meter iconos de marketing en design systems React. Convertir SVG de handoff de diseño en componentes TSX. Prototipar nombres de componente antes de añadirlos a un repo. Entender las diferencias de atributos JSX respecto al SVG crudo.
Ejemplos prácticos
Badge con atributos poco amigables para JSX
Entrada de ejemplo
Salida
Atributo xlink:href
Entrada de ejemplo
Salida
Explorar herramientas SVG relacionadas
Optimiza primero con optimize SVG, valida la accesibilidad en validate SVG o abre el hub SVG.
FAQ de SVG a JSX
Conversión React ligera
¿Soporta CSS incrustado?
No en v1 — los bloques <style> se omiten. Los atributos style inline se convierten a objetos.
¿Export TypeScript?
Activa el interruptor TypeScript para añadir tipado de props en el componente.
¿Sprites?
Las sprite sheets quedan fuera de alcance — pega un único elemento <svg> raíz.
Herramientas SVG
Previsualiza, optimiza con SVGO, exporta Data URI, redimensiona, embellece, convierte a JSX y valida SVG — todo en tu navegador.
Explorar otras categorías de herramientas
- Minificar
Reduce código y assets para producción — minifica JavaScript, CSS, HTML, JSON y XML antes de gzip o un despliegue CDN.
- Desminificar
Expande código minificado o comprimido — desminifica JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML y otros formatos al depurar o revisar.
- Conversión
Transforma datos entre JSON, YAML, XML y CSV en local — sin subidas a un servidor.
- Codificación
Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.
- Serialización
Serializa y deserializa estructuras PHP junto a los flujos JSON.
- Herramientas JSON
Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.
- Embellecer
Haz el código legible con una indentación coherente — embellece JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML y más en tu navegador.
- Preprocesadores CSS
Compila SCSS o LESS a CSS estándar en el navegador — combínalo con embellecer o minificar para un flujo de hoja de estilos completo.
- Herramientas color y CSS
Comprobación de contraste WCAG pegada localmente con sintaxis de color CSS moderna — vistas de par y matriz, nunca se sube.
- DevOps e Infra
Formato, validación y minificación de Terraform HCL, formato y lint de Dockerfile, validación de Docker Compose y .env.
- CI/CD
GitHub Actions y GitLab CI — formatear YAML y comprobar la estructura de workflows/jobs en el navegador.
- Logs y observabilidad
JSON/NDJSON línea a línea y access logs de Nginx/Apache — formato, filtro, validación y CSV/TSV.
- Kubernetes
Manifiestos multi-doc, validación estructural, starters Ingress/Deployment y formato de values de Helm.
- Red / IP
CIDR, subredes y ayudas IPv4/IPv6 — en tu navegador.
- Seguridad y tokens
JWKS, certificados X.509 y escaneo de secretos — en local en el navegador.
- API y esquemas
Herramientas OpenAPI para formatear, validar y analizar tus specs.
- Herramientas HTTP
cURL, mensajes HTTP, URLs, HAR y Cookie / Set-Cookie pegados en el navegador — formatear e inspeccionar, nunca se envían.
- Herramientas SEO / Web
Genera meta tags, Open Graph y Twitter Card localmente — vistas simuladas desde tus entradas, nunca fetch de tu sitio en vivo.
- Utilidades para desarrolladores
Timestamps, UUID, ULID, Nanoid, cron, contraseñas, regex, slugify, bases numéricas, mayúsculas, diff de texto y chmod — todo en el cliente.
- Texto y Markdown
Cuenta palabras, genera TOC Markdown y limpia listas de líneas — todo en tu navegador.
- IA y LLM
Conteo de tokens, estimación de costes y ajuste a la ventana de contexto — 100 % en el navegador.
- Datos de prueba
Valores de campo sintéticos para fixtures y seed de BD — primero números de teléfono en rangos reservados.
- Etiquetas de código de barras
Dibuja etiquetas Code 128, EAN-13 y UPC-A en el navegador — descarga PNG y SVG, no es un lookup GS1.