I’m hoping somebody at figma reads this little article and puts in a fix or some kind of export option to make this more predictable.
Don’t “flatten” it (Figma’s way of burning in transforms).From there, you can edit the shape however you want provided you… The short story is you just need to start with a predefiend shape (like a line, circle, or rectangle) instead of the pen tool. An outlined stroke is unusable because it breaks the scalability of the icons the way we want them, and it bloats the SVG markup. Figma does this for some icons and not others. Seemingly unpredictably, it will outline the stroke of an icon when exporting. Unfortunately, it’s not a perfect experience for exporting vectors. It’s more straightforward to build icon vectors in Figma than in Sketch, and stroke-based icons are supported as components ( components in Figma are like symbols in Sketch). This is where I do the lion’s share of my design work. In getting our icons to work in the way described above, I encountered some strange issues across from different design tools. This makes our app more speedy with smaller download sizes, as opposed to needing to load an entire collection of icons all at once, coupled with a too-typical flash of random characters that appear before an icon font loads for the first time.
Each page can include its own subset of icons, and these icons are only loaded one time. SVG is treated like an image for size and alignment purposes, which has its advantages. With an icon font, you’re stuck with faking the stroke, and if the browser wants to read your letter-spacing or line-height wrong, you could be stuck with blurry rendering everywhere. You can use CSS to set the stroke thickness. One of the great things about this approach is that SVG’s are stylable with CSS. Of course, we could probably do something cool with icon fonts to achieve this effect, it would likely result in bloated file size and less-predictable output. We also wanted to have stroke-based icons where the stroke thickness doesn’t change no matter the size of the icon. So that left us with an icon font or SVG.
You can use image files, or icon fonts, or SVGs. There are a bunch of different ways to make icons. I hope to spare you, dear reader, days of trial and error getting your SVG icons to work the way you want them to. In this article, I will describe these issues in detail and walk you through how we tackled them. In implementing these icons across our app, we ran into a number of technical issues. For the latest design iteration of Keap, we chose to use stroke-based icons because of their clean, contemporary look.
0 kommentar(er)
