How to colorize SVG image?

Are you tired of using icoMoon to maintain your SVG icons? While it's a great tool for managing icons, its user interface can leave much to be desired. On top of that, you may be looking to reduce your dependency on third-party tools. If so, a CDN could be the perfect solution.

However, switching from icoMoon to a CDN can bring about some changes that you should be aware of. Instead of using a font-based approach, a CDN requires the icons to be added as images. This shift in delivery and display may take some getting used to, but it should not affect the functionality of the icons themselves.

IcoMoon font based approach

In this approach, we use the icomoon classnames to render the SVG icons.

And we can change the colors of SVG icons with CSS like this. 👇

.icomoon-logo {
  color: red;
}

SVG with HTML <img> element approach

In this approach, we use the img tag to render the SVG icons.

But we can't change the colors of SVG icons with CSS when we use with HTML IMG tag. This is not worked!

We are putting the SVG icon in the src attribute of the img tag.

<img src="https://cdn.dsmcdn.com/example-icon.svg" alt="example-icon" />

How we can change the colors of SVG <img> icons?

1- Hacky way

We can use a hacky way to handle that like this. 👇

This filter can able to change the colors of SVG HTML <img> elements but you need to find the color that you need with a trial-and-error method.

img: {
  filter: invert(20%) sepia(243%) saturate(1576%) hue-rotate(-21deg) brightness(137%) contrast(73%);
}

SOURCE

It's a way you can use it but not the best one!

What else we can do at this point? Let me introduce you to CSS MASK!

2- CSS MASK

In my opinion, CSS masking is the ideal solution to this problem. By using the mask-image property, we can render the SVG image as if it were a font. To do this, we'll need to create a CSS class for the SVG icon.

This is the CSS class for the SVG icon. 👇

.icon {
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  width: 24px;
  height: 24px;
}

Then we will use the mask-image property to render the SVG image like a font. But we will define it dynamically with React. 👇

We also need to define the WebkitMaskImage property for the Safari browser.

const MenuItem = ({ SvgIcon, selectedName, link }: MenuItemProps) => {
  return (
    <a className={cn("menu-item", selectedName === "my_coupons" && "active")} href={link}>
      <div className="icon" style={{ maskImage: `url(${SvgIcon})`, WebkitMaskImage: `url(${SvgIcon})` }} />
      <p className="name">"My Coupons"</p>
    </a>
  );
};

And that's it! Now we can change the colors of SVG icons with CSS like this. 👇

.icon {
  background-color: red;
}

Let's take a look at the result. 👇

Conclusion

In this article, we learned how to use SVG images like a font. We learned how to change the colors of SVG images with CSS. We also learned how to use SVG images with HTML <img> tag. I hope you enjoyed this article. If you have any questions, please let me know in the comments. Thanks for reading!