Submitted over 1 year ago

Sneakers Ecommerce Website using React, TailwindCSS, Vite and others

react, tailwind-css, vite, swr

Bello Hammed•170

@Professor1345

A solution to the E-commerce product page challenge

Preview Code

Solution retrospective

I went through alot of stress while coding it. Feel free to check it out and drop comment.

I have a question. How can I change the svg color on hover. I tried allota of things, like hover:fill-yellow, hover:stroke-yellow. They all didn't work. I only manage filter (invert).

Your response is very much welcomed.

Code

Please log in to post a comment

Community feedback

K01wfd•690
@K01wfd
Posted over 1 year ago
Hi Bello Hammed, oneway on how to change the icon fill color dynamically, is to have a css custome variable for the fill color alongside with fallback color:
```
<path fill="var(--icon-color, #000)"></path>

.icon:hover{
--icon-color:#fff;
}
```
i recommend to group your svg icons in a sprite.svg file, there are many free online tools to do that.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord