export const Icon = styled.img`
height: 25px;
width: 25px;
filter: ${({theme})=>theme.filter};;
`si se hace en el mismo icono se obtiene el mismo resultado. No entiendo la rozón de lo que hizo el instructor, si el cambio se debía hacer para todos los iconos
¡Hola Oscar!
Por lo que veo en el código que compartiste, el instructor utilizó la sintaxis de los Styled Components para aplicar un filtro en la imagen del icono. Al utilizar la sintaxis ${({theme})=>theme.filter}, el filtro se aplicará de acuerdo al tema que se esté utilizando en la aplicación.
En cuanto a tu pregunta sobre por qué el instructor hizo el cambio solo en ese icono en particular, es difícil saberlo sin más contexto. Tal vez haya querido hacer una prueba para ver cómo se veía el cambio en un solo icono antes de aplicarlo a todos. O tal vez haya querido demostrar cómo se pueden aplicar estilos específicos a un componente en particular.
En cualquier caso, si deseas aplicar el mismo filtro a todos los iconos, puedes hacerlo de la siguiente manera:
export const Icon = styled.img`
height: 25px;
width: 25px;
filter: ${({theme})=>theme.filter};
&:nth-child(n) {
filter: ${({theme})=>theme.filter};
}
`De esta manera, el filtro se aplicará a todos los elementos que tengan la clase Icon.
Espero que esto te haya ayudado a aclarar tu duda. ¡Buenos estudios!
Creo que lo hace para modularizar su funcionalidad para que sea reutilizable según a que iconos, ya que si lo pone en el styled-component Icono el icono del bombillo también sufre el cambio del invertir el color y seguramente a futuro todos los iconos que no se quiera que cambien tomaran el cambio.