Trabajar con iconos SVG en React abre la puerta a estilos dinámicos que reaccionan al estado de tu aplicación. Aquí aprendes cómo pasar colores como props a un SVG, organizar tus estilos por archivo y resolver el clásico problema del prop drilling al conectar eventos entre componentes.

Cómo separar estilos para el contenedor y el SVG

Cuando un icono deja de ser solo texto y pasa a ser un SVG, necesitas estilizar dos cosas: el contenedor y el gráfico en sí.

La solución es dividir las clases. Por un lado, una clase icon-container para la etiqueta span que envuelve el icono. Por otro, una clase icon-svg que aplica directamente sobre el SVG y le da dimensiones concretas.

• width: 24px para el ancho del icono.
• height: 24px para mantener la proporción cuadrada que pide el sistema de diseño basado en ocho.
• Clase aplicada vía prop className desde React, no escribiendo el atributo en el SVG manualmente.

En React no necesitas tocar el archivo SVG para añadir clases. Cuando importas el componente con su nombre asignado, puedes pasarle props como className y React las traduce automáticamente al elemento SVG renderizado [03:05].

¿Cómo aplico una clase CSS a un SVG importado en React? Pasas la clase como prop className al componente SVG importado. React la inyecta directamente en el elemento <svg> al renderizar.

Por qué mover los estilos a su propio archivo

Mantener el CSS junto al componente que lo usa es una cuestión de orden, no de funcionalidad.

Si los estilos del icono viven en TodoItem.css pero ahora existe un componente TodoIcon con su propia lógica, lo natural es crear un TodoIcon.css y cortar esos estilos hacia ahí. Sigue funcionando igual, pero tu proyecto queda más fácil de mantener cuando crezca.

Cómo paso un color como prop a un componente SVG

La propiedad fill es el equivalente a color para los SVG, y puedes controlarla desde JavaScript.

La técnica consiste en convertir cada elemento de tu objeto iconTypes en una arrow function que recibe un parámetro color. Esa función retorna el JSX del SVG con el atributo fill={color} ya inyectado.

jsx const iconTypes = { check: (color) => <CheckSVG className="icon-svg" fill={color} />, delete: (color) => <DeleteSVG className="icon-svg" fill={color} />, };

Desde el componente TodoIcon invocas la función pasando el color recibido por props: iconTypes[type](color). Así el mismo SVG puede pintarse en verde, gris o rojo según el contexto [05:10].

Cómo decidir el color según el estado del todo

La lógica de color vive en los componentes específicos CompleteIcon y DeleteIcon, no en TodoIcon.

• En CompleteIcon recibes la prop completed. Si es true, envías color="green"; si es false, envías color="gray".
• En DeleteIcon el color por defecto es gray, porque el rojo solo aparece en hover.
• TodoIcon se mantiene agnóstico: solo recibe un color y lo aplica.

Cómo logro el efecto hover en un SVG con CSS

El hover no se resuelve con React, se resuelve con CSS apuntando a la propiedad fill del SVG hijo.

Desde TodoIcon.css usas selectores que detectan el contenedor y aplican estilo al SVG anidado:

css .icon-container-delete:hover .icon-svg { fill: red; } .icon-container-check:hover .icon-svg { fill: green; }

Esto deja claro algo poderoso: los SVG aceptan fill también desde CSS, no solo desde atributos HTML [09:40].

¿Puedo cambiar el color de un SVG con CSS? Sí, usando la propiedad fill en una regla CSS que apunte al elemento <svg> o a sus hijos como <path>.

Cómo conecto eventos onClick a través de varios componentes

Los eventos en React solo funcionan sobre elementos del DOM, no sobre componentes personalizados.

Eso significa que si pones onClick en <CompleteIcon>, ese click no hace nada hasta que la prop viaje hasta un elemento real como <span> o <svg>. La cadena queda así:

1. TodoItem envía onComplete al CompleteIcon y onDelete al DeleteIcon.
2. Cada icono recibe su evento y lo reenvía a TodoIcon como una prop genérica onClick.
3. TodoIcon aplica onClick directamente sobre el <span> contenedor del SVG.

Esta traducción de nombres específicos (onComplete, onDelete) a uno genérico (onClick) mantiene a TodoIcon reutilizable para cualquier tipo de acción [13:20].

Qué es el prop drilling y por qué importa

Enviar la misma prop a través de tres o cuatro componentes solo para que llegue al destino final tiene nombre: prop drilling.

Es funcional, pero engorroso. Un descuido tan simple como pasar onComplete donde debía ir onDelete rompe la funcionalidad sin lanzar ningún error visible. Es justo lo que ocurre cuando el botón de eliminar deja de responder mientras completar sí funciona.

¿Qué es prop drilling en React? Es el patrón de pasar props a través de múltiples componentes intermedios que no las usan, solo para que lleguen a un componente profundo que sí las necesita.

Qué aprendiste sobre interactividad en React

Con estos ajustes la aplicación ya completa, busca y elimina todos, además de mostrar iconos propios con colores dinámicos y hover funcional.

El recorrido del módulo cubrió eventos del DOM traducidos a estados, comunicación entre componentes vía props, manejo de SVGs como componentes de React y los primeros síntomas de un proyecto que necesita patrones más avanzados de gestión de estado.

¿Cómo resolverías tú el prop drilling en una app con cinco niveles de componentes? Cuéntame en los comentarios qué herramientas has usado.