SVG → React: del archivo bruto al componente listo para usar

Un icono 24×24 exportado desde Figma puede pesar 3–6 KB en SVG en bruto. Tras optimize default, a menudo 1–2 KB — el componente JSX generado puede ser un poco más pesado (~2 KB) por el wrapper React. El JSX sigue siendo legible gracias al embellecedor SVG en línea sobre el markup intermedio si necesitas auditar los paths.

Cada componente de icono importado se incluye en el chunk JavaScript de tu app — a diferencia de un archivo `.svg` servido como estático. Es el trade-off habitual de React; el minificador JavaScript en línea ilustra la compresión del lado JS, pero la primera línea de defensa sigue siendo un SVG fuente ligero antes de convertir.

El convertidor mapea `class` → `className` y los atributos kebab-case SVG a camelCase React. Para un theming coherente, edita el SVG fuente o el JSX para usar `fill="currentColor"` y controlar el color vía CSS/Tailwind en el componente padre.

Un icono solo junto a una etiqueta de texto es decorativo → `aria-hidden="true"` en el `<svg>`. Un icono que porta el sentido (p. ej. estado de error sin texto) debe conservar `<title>` / `<desc>` o un `aria-label` explícito. FastMinify conserva title/desc en optimize; comprueba que sobrevivan a la conversión.

Nombres de componente inválidos (`icon-arrow`) → repliegue silencioso a `SvgIcon` (la herramienta señala el fallback). XML inválido o varias raíces → error de parsing. IDs duplicados si inlineas varias veces el mismo componente sin sprite.

No hace falta instalar SVGR para convertir un icono recibido por Slack o una exportación puntual de Figma.

La conversión en línea es ideal para explorar y entregar unos cuantos componentes. El import automático `import Icon from './icon.svg'` en cada build, el batch sobre una carpeta `icons/` y las plantillas SVGR custom siguen siendo cosa de `@svgr/cli`, `@svgr/webpack` o `vite-plugin-svgr`.

Valida nombre, export y estructura JSX en svg-to-jsx, luego reproduce las mismas convenciones en SVGR. Optimiza con el mismo preset SVGO que en CI — consulta el artículo SVGO presets y la guía de optimización SVG.

FastMinify svg-to-jsx cubre el caso pegar → copiar JSX con tres opciones. El ecosistema npm ofrece más flexibilidad para la automatización.

La elección impacta el styling, la accesibilidad y el tamaño del bundle JavaScript. Un componente React encaja con iconos reutilizados en un design system; el inline puntual o `<img src="icon.svg">` sigue siendo válido para casos simples.

Iconos UI (botones, navegación), logos tematizables (`fill="currentColor"`), o assets compartidos entre varias apps React/Next.js. El componente encapsula el markup y evita duplicar 200 líneas de `<path>` en cada página.

svg-to-jsx produce JSX a partir del markup existente. No resuelve los imports `@use` Sass, los partials multiarchivo ni la generación automática en cada commit — para eso, SVGR en CI sigue siendo pertinente. La herramienta en línea destaca para prototipar, corregir una exportación u onboardear a un diseñador.

Una exportación de Illustrator o Figma suele incluir metadatos y una precisión excesiva. Pasa primero por el optimizador SVGO en línea (preset safe o default para iconos UI), o el minificador SVG para una limpieza solo de espacios. Reduces el tamaño del componente final sin tocar el workflow React.

Pega el SVG optimizado en la herramienta SVG a JSX. Elige el nombre del componente (debe empezar por mayúscula — si no, se usa `SvgIcon`), export default o nombrado, y TypeScript si tu codebase está en `.tsx`.

Tras copiar, envuelve si hace falta: fusiona `props` en el `<svg>` (`{...props}`), añade `aria-hidden` para iconos decorativos, o `role="img"` + `aria-label` para los informativos. Valida con validate SVG en línea sobre el markup fuente antes de convertir.