All posts in " svg icons "
0 Shares

Papercons

By seorocket / a couple of months ago

Bobby Grace, on the Dropbox Paper team: On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for inserting icons. They: Use a single Sketch file, checked into the […]

0 Shares

Preparing and Exporting SVG Icons in Sketch

By seorocket / a few months ago

There is an interesting gotcha about the fill-rule attribute of SVG, detailed here by Anthony Collurafici. Fill-Rule is an SVG property that basically defines how to determine what shapes are filled or subtracted from the shape. The default SVG value is “nonzero”, and this is what Android requires. Unfortunately, Sketch uses “evenodd”. Luckily Sketch provides […]

0 Shares

The Road to SVG and Custom Elements in Clarity Icons

By seorocket / a few months ago

Another day, another design system deciding an SVG icon system is the way to go. Everybody has their own set of considerations when making a choice like this. Scott Mathis documents the major considerations for Clarity: Opting-out, sizing, multi-colors, interactivity, scale, and the future. Based on these, they actually ended up on a custom element […]

0 Shares

Etsy’s Evolving Icon System

By seorocket / a few months ago

Etsy moves away from an icon font in production to using SVG. It’s going to be an inline <svg> system, but abstracted as a <etsy-icon> custom element for ease of use. Two cents: I could see the need for that abstraction going away if we had a more convient syntax for <use> available, like: <svg […]

Page 1 of 2