I have a list of SVG icons in my navbar, I want when I’m hovering one to change its color, for now nothing happens on hover
Main component
import React, { useState } from "react";
import navElements from "utils/json/socials";
import twitchLogo from "images/socials/icons8-twitch.svg";
import discordLogo from "images/socials/icons8-discord.svg";
import instagramLogo from "images/socials/icons8-instagram.svg";
import twitterLogo from "images/socials/icons8-twitter.svg";
import tiktokLogo from "images/socials/icons8-tiktok.svg";
export default function NavDesktopSocials() {
const socials = {
twitchLogo,
discordLogo,
instagramLogo,
twitterLogo,
tiktokLogo,
};
return (
<div className="flex items-center social-links">
<div className="flex justify-center my-6">
{navElements?.map((element) => (
<a href={element.path} rel="noopener noreferrer" target="_blank">
<img src={socials[element.desc]} className="w-8 mx-1" />
</a>
))}
</div>
</div>
);
}
Exemple of svg file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="96px" height="96px" fill-rule="nonzero"><g fill="#89867e" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M19.98,5.69c-1.68,-1.34 -4.08,-1.71 -5.12,-1.82h-0.04c-0.16,0 -0.31,0.09 -0.36,0.24c-0.09,0.23 0.05,0.48 0.28,0.52c1.17,0.24 2.52,0.66 3.75,1.43c0.25,0.15 0.31,0.49 0.11,0.72c-0.16,0.18 -0.43,0.2 -0.64,0.08c-2.4,-1.48 -5.38,-1.56 -5.96,-1.56c-0.58,0 -3.56,0.08 -5.96,1.56c-0.21,0.12 -0.48,0.1 -0.64,-0.08c-0.2,-0.23 -0.14,-0.57 0.11,-0.72c1.23,-0.77 2.58,-1.19 3.75,-1.43c0.23,-0.04 0.37,-0.29 0.28,-0.52c-0.05,-0.15 -0.2,-0.24 -0.36,-0.24h-0.04c-1.04,0.11 -3.44,0.48 -5.12,1.82c-0.98,0.91 -2.93,6.14 -3.02,10.77c0,0.31 0.08,0.62 0.26,0.87c1.17,1.65 3.71,2.64 5.63,2.78c0.29,0.02 0.57,-0.11 0.74,-0.35c0.01,0 0.01,-0.01 0.02,-0.02c0.35,-0.48 0.14,-1.16 -0.42,-1.37c-1.6,-0.59 -2.42,-1.29 -2.47,-1.34c-0.2,-0.18 -0.22,-0.48 -0.05,-0.68c0.18,-0.2 0.48,-0.22 0.68,-0.04c0.03,0.02 2.25,1.91 6.61,1.91c4.36,0 6.58,-1.89 6.61,-1.91c0.2,-0.18 0.5,-0.16 0.68,0.04c0.17,0.2 0.15,0.5 -0.05,0.68c-0.05,0.05 -0.87,0.75 -2.47,1.34c-0.56,0.21 -0.77,0.89 -0.42,1.37c0.01,0.01 0.01,0.02 0.02,0.02c0.17,0.24 0.45,0.37 0.74,0.35c1.92,-0.14 4.46,-1.13 5.63,-2.78c0.18,-0.25 0.26,-0.56 0.26,-0.87c-0.09,-4.63 -2.04,-9.86 -3.02,-10.77zM8.89,14.87c-0.92,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.75,-1.92 1.67,-1.92c0.93,0 1.67,0.86 1.67,1.92c0,1.05 -0.74,1.91 -1.67,1.91zM15.11,14.87c-0.93,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.74,-1.92 1.67,-1.92c0.92,0 1.67,0.86 1.67,1.92c0,1.05 -0.75,1.91 -1.67,1.91z"></path></g></g></svg>