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>)

• A+ icon (The black #090909 parts in the icon is set in a <path fill> and a <circle stroke> 🤨)

See, the property control varies! It may not be a good approach to require FE to style each icon in different ways (They will go bananas 🤬🍌)

✒ stroke vs fill

• stroke defines the outline or contour of an…