Quando eu repito os passos da professora a cor do meu ícone da navbar nao é alterada, apenas do texto abaixo do ícone. Ela aplica a cor na tag , que teoricamente nao deveria mudar a cor do icone contido dentro da tag e não está mudando no meu caso.
import Logo from './assets/Logo.svg';
import Feed from './assets/feed.svg';
import Account from './assets/account_circle.svg';
import Info from './assets/info.svg';
import Logout from './assets/logout.svg';
import './styles.css'
export default function Sidebar() {
return (
<aside>
<img src={Logo} alt='Logo do CodeConnect' />
<nav>
<ul className='lista-sidebar'>
<li>
<a href='#'>Publicar</a>
</li>
<li>
<a href='#' className='item__link item__link--ativo'>
<img src={Feed} alt='' />
<span>Feed</span>
</a>
</li>
<li>
<a href='#' className='item__link'>
<img src={Account} alt='' />
<span>Perfil</span>
</a>
</li>
<li>
<a href='#' className='item__link'>
<img src={Info} alt='' />
<span>Sobre nós</span>
</a>
</li>
<li>
<a href='#' className='item__link'>
<img src={Logout} alt='' />
<span>Sair</span>
</a>
</li>
</ul>
</nav>
</aside >
)
}
`aside{
background-color: var(--cinza-escuro);
padding: 2.5em 1em;
width: 177px;
border-radius: 8px;
}
.lista-sidebar{
display: flex;
flex-direction: column;
gap: 2.5em;
margin-top: 5em;
}
.lista-sidebar li a{
display: flex;
flex-direction: column;
align-items: center;
font-size: 16px;
gap: 10px;
}
.item__link{
text-decoration: none;
color: var(--cinza-claro);
}
.item__link--ativo{
color: var(--branco);
}
`