Kevin Powell - Community•7mo ago

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•7mo 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•7mo ago

https://codepen.io/MannixMD/pen/ExrEmwX

Mannix

CodePen

ExrEmwX

...

Avinash•7mo ago

i used fill it wasnt working. if i paste svg , my code becomes even more messier. its working jollykevin

Gaming

Programming

Unable to change SVG icons color in react