KPC
Kevin Powell - Community•16mo ago
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";
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
Mannix•16mo 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
Mannix
Mannix•16mo ago
Avinash
AvinashOP•16mo ago
i used fill it wasnt working. if i paste svg , my code becomes even more messier. its working jollykevin

Did you find this page helpful?