Sorry if the title doesn’t seem very explicit, I’ll explain myself here.
I work for a startup company that makes a medical application, and in this context we of course use icons. So we created a design system on figma with icons that sometimes have extra strokes to have some uniformity of our icons (icons come from several different libraries).
Sometimes the developers need new exports of these icons and so we re-export them as svg from the design system, from Figma. However we noticed two things:
- Very often we have to remove the following code from SVG exports because otherwise the icons do not appear in the app:
<clipPath id="clip0_6874_17829"> <rect width="512" height="512" fill="white"/> </clipPath>
- And more problematically, exporting an svg with strokes adds a new tag inside the code (exemple :
<mask id="path-1-outside-1_6874_17786" maskUnits="userSpaceOnUse" x="-0.800781" y="-0.800049" width="19" height="19" fill="black">). Because of this tag, the SVG does not appear in the final app.
What to do?
As mentioned, some of our icons in the design system have strokes, and we can’t do anything about that, so we need to be able to export them cleanly.
This problem is specific to Figma, because we tried to download icons made purely from strokes without going through figma and the problem did not arise.
Thanks for your help