Unable to change SVG icons color in react

I have downloaded svg files and added fill = "currentColor" to each individual . THen i created a file to export these svg, so i can use it in other components. THis is where the issue happens, i cant change the color via CSS , i even added !important, still its showing default black color. ANyone knows how to fix it?
imageExport.jsx

export { default as email } from "./envelope-solid.svg";
export { default as lock } from "./lock-solid.svg";
export { default as eyeOpen } from "./eye-solid.svg";
export { default as eyeClose } from "./eye-slash-solid.svg";
imageExport.jsx

export { default as email } from "./envelope-solid.svg";
export { default as lock } from "./lock-solid.svg";
export { default as eyeOpen } from "./eye-solid.svg";
export { default as eyeClose } from "./eye-slash-solid.svg";
component.jsx


import {
email as EmailIcon,
eyeClose as PasswordHide,
eyeOpen as PasswordShow,
lock as LockIcon,
} from "../assets/imageExport";


<img
src={EmailIcon}
alt=""
width={20}
height={20}
className="icons_mail"
/>
component.jsx


import {
email as EmailIcon,
eyeClose as PasswordHide,
eyeOpen as PasswordShow,
lock as LockIcon,
} from "../assets/imageExport";


<img
src={EmailIcon}
alt=""
width={20}
height={20}
className="icons_mail"
/>
.icons_mail {
color: rebeccapurple !important;
}
.icons_mail {
color: rebeccapurple !important;
}
3 Replies
Mannix
Mannix12mo ago
the svg need to be an inline svg element not a img tag with svg file set as src. also it's fill not color
Avinash
Avinash12mo ago
i used fill it wasnt working. if i paste svg , my code becomes even more messier. its working jollykevin
Want results from more Discord servers?
Add your server