Por Qué Convertir SVG a Componentes React
Usar SVG como componentes React te da control total sobre estilos, animaciones e interactividad a través de props. A diferencia de etiquetas de imagen o fondos CSS, los componentes SVG en línea pueden responder a cambios de estado, aceptar colores dinámicos via props y participar en el ciclo de vida del componente React. Este enfoque también permite tree-shaking; los íconos no utilizados se excluyen automáticamente de los bundles de producción por bundlers modernos como Webpack y Vite.
Entendiendo las Diferencias de Atributos JSX
React usa camelCase para atributos DOM en lugar de la convención kebab-case de HTML. SVG tiene muchos atributos con guiones como stroke-width, fill-opacity y clip-rule que deben convertirse en strokeWidth, fillOpacity y clipRule en JSX. El atributo class se convierte en className, y las cadenas de estilo en línea deben convertirse a objetos JavaScript con nombres de propiedad en camelCase y valores de cadena o numéricos.
TypeScript y SVG Props
Usar SVGProps<SVGSVGElement> de las definiciones de tipo de React le da a tu componente seguridad de tipos completa para todos los atributos SVG válidos. Esto significa que los consumidores obtienen autocompletado para propiedades como viewBox, fill, stroke, opacity y todos los atributos de presentación. Combinado con tu propia interfaz de props personalizados, TypeScript detecta errores tipográficos de atributos y valores inválidos en tiempo de compilación en lugar de en tiempo de ejecución.
Optimización de Rendimiento con memo y forwardRef
Envolver componentes de íconos con React.memo previene re-renderizados innecesarios cuando los componentes padres se actualizan pero los props del ícono permanecen sin cambios. Esto es particularmente beneficioso en vistas de lista con muchos íconos. El envoltorio forwardRef permite a los componentes padres acceder al nodo DOM SVG directamente para mediciones, observadores de intersección o animaciones imperativas sin romper la abstracción del componente.
