Styling SVG icon in React.js

Swinging between both design team and frontend developing team, I am recently dealing with icons, including those drawn by our designers 🎨Hence, this post will guide you to use svg icons in an developer-friendly, easy-to-style method 👩‍💻

Our Goal

Enable frontend to apply the same styling logic, especially changing color, among all icons.

The Challenge

When it comes to changing the color of a svg icon, frontend may actually needs to change the stroke property or the fill property, which varies between different icons.

Let’s open 3 svg files with text editor to see what I mean:

filter, folder, A+

• filter icon (color set on fill property in <path>)

• folder icon (color set on stroke property in <path>)