React and dual/multi color SVG icon
Lately I was implementing new UI in the project based on Figma design. The design had dual color icons for ticks and errors.
We were using already react-icons module so I didn’t want to create new svg icons with separate paths and colors. The needed icons were pretty simple so after checking what icons are there already in react-icons module I just decided to stack some icons with different color.
I’m not a fan of position: relative and position: absolute if they are not absolutely necessary so I was looking for some other solution.
If you are using font awesome icons then there is actually the documentation on how to do it, which you can find here: Stacked Icons.
And here in github issues for react-icons I have finally found my answer. So you can skip reading here and follow that link or just see the solution below.
Then to get something like this:
You just need to use the IconStack component as follows:
And here you can find the repository for this project: Dual color SVG icons.
