While working on a website project using Next JS, I came across the challenge of displaying SVG icons stored in Sanity and dynamically changing their fill color. Is it possible to achieve this feature, such as changing the color when hovering over the icon?
Let me provide an overview of my code to give context to what I am attempting:
const [icon, setIcon] = useState('');
useEffect(() => {
const query = '*[_type == "socials"]'
client.fetch(query)
.then((data) => {
setIcon(urlFor(data.icon).width(24).url());
});
}, []);
<NextImage
useSkeleton
src={icon}
width='24'
height='24'
alt='name'
/>
It is worth noting that the NextImage component used above includes a skeleton loading effect.
The code successfully displays the SVG icons from Sanity, but I am struggling to implement a hover effect to change the color dynamically. This is the issue I need assistance with.
Here are the SVG icons currently displayed:
https://i.sstatic.net/N15iP.png
I aim to have the ability to alter the color of these icons programmatically without modifying the SVG files already uploaded to Sanity.