There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different. …
I wrote that using inline <svg icons make for the best icon system. I still think that’s true. It’s the easiest possible way to drop an icon onto a page. No network request, perfectly styleable.
But inlining code has …
Nicolas Gallagher:
At Twitter I used the approach described here to publish the company’s SVG icon library in several different formats: optimized SVGs, plain JavaScript modules, React DOM components, and React Native components.
There is no One True Way©…
This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here’s the ideal example:
<button type="button">
Menu
<svg class="svg-icon"
role="img"
height="10"
width="10"
viewBox="0 0 10 10"
aria-hidden="true"
focusable="false">
<path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
</svg>
</button>This post is the first in a series about the power of CSS.
CSS is getting increasingly powerful, and with features like …
When you use a bit of inline <svg> and you don’t set height and width, but you do set a viewBox, that’s a fitwigoo. I love the name.
The problem with fatwigoo’s is that the <svg> will …
Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of <svg></svg> might have a <title></title>, and you might be appying IDs to both of those elements for various reasons.…
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
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
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, …
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:
