Building your own icon library
Hey yall, i was wondering; for the people who work at a company and need to maintain a custom icon library made by your design team - how do you implement them in your codebase without a lot of copy and pasting?
I started by moving our icons to the
/public folder, but i realize this feels really weird, i was wondering if there's a solution out there that's a bit less daunting.5 Replies
Generally, I create react components from the svg. It's kinda annoying, but it's manageable if you add the icons as you build features. Technically you could make a script to convert svgs to components, but there are edge cases to consider and the time tradeoff might not be worth it.
Do you have any examples of those trade-offs?
I really wanna build something to automate this, but i fear i'm over-engineering it
- Depending where you're generating the svg from, there might be a bunch of properties that are not necessary. This is easier to clean manually then build a script for it.
- The same goes for groups and incorrect svg paths. There may be a clipping mask that could be flattened, a group that does nothing. Again, easier to clean manually then to build a script.
- You most likely want to set color of svg elements to
currentColor, so that you can recolor it using CSS. But with script it can be issue if you have icon with multiple colors. The multiple colors can be accidental (such as #FFFFFF and #FEFEFE), or it could be intentional.
Of course, all of this can be either ignored, or you can write the script that's good enough. For me personally, I went from scripts to manual transformation because I don't think it's worth the time.
Also, I'd double check with your designers if they are really using custom made icons. A lot of times designers work with icons sets, taking few icons from multiple sets to combine into "company icons". If that's the case, you could probably just find the npm packages for these icons sets.They do work with icon sets, however they do modify them. I was thinking we could just download the icon library, and then manually import the ones that were modified by the designers.
It just seemed like a recipe for conflicts
Yeah, unfortunately, it's annoying work in any case. 😅