CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. The possibilities are still being explored on what CSS can do to make writing UI’s simpler, and that’s exciting! One of those is now one ...
Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of <svg> might have a <title>, and you might be appying IDs to both of those elements for various reasons.One of those reasons might be because you just want an ID on the icon to uniquely identify it for JavaScript or...
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 ...
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. Unfortu...
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 actual...
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: <...
High five to Dave Gandy and the Font Awesome team:The Font Awesome 5 Kickstarter raised $1,076,940 with 35,549 backers, making it the most funded and most backed software Kickstarter of all time.What’s do the funders get? 1,000 more icons, icon font ligatures (a uniquely cool thing fonts can do, like turn ...
Icons. They’re popular. They help complement content (most of the time). And yet they can be a pain in the neck. Once you’ve decided on a format (SVG or icon font?) and designed the set, there are still other considerations, many of which pop up while you’re coding.Here’s an excellent question...
Solid basics of an SVG icon system in this guide from Florens Verschelde, mixed with some good tricks: the two-color trick, pre-loading the sprite, and using custom properties for unlimited color variations. Also an interesting bit about using multiple methods for sprite insertion:I like mixing both methods, building...
Recent Comments