Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
5 replies
Avinash

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";



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;
}
Was this page helpful?