Use CSS mask instead of SVG sprite

[basham]

Leading to v1.0.0, we experimented with clip-path as a way to use CSS-only icons. It resulted in some poor-quality rendering in Firefox and Chrome. However, there's another option that uses mask. The recent article Icons in Pure CSS explores this option. I worked on a version with this direction, and it seems to be pretty good.

There are two downsides to this approach.

First, when rendering the icons, Chrome and Safari works equally well. However, Firefox has some pixel rounding errors. This would incidentally clip some pixels on the side of the icon. However, this only happens when resizing the viewport. If the icon re-paints (such as changing the color of the icon on hover) or if you refresh the page — then it renders fine. Overall, this is a minor oddity.

Second, the dependency size will increase slightly (+9kb if wanting the entire icon set). This is because there's a lot more repetitive information needed when embedding the icons in CSS than when using SVG symbols.

Despite those caveats, I suspect the benefits may be worth it.

If we embed icons within CSS variables, then we no longer need to support SVG sprites. Without SVG sprites, we don't need rivet-icons.js (the script that embeds the sprite in the body). That means JavaScript would only be needed to use the opt-in rvt-icon element. And that element is significantly simplified. Now, the use of the <rvt-icon name="heart" /> is effectively a shorthand for <span class="rvt-icon" style="--rvt-icon: var(--heart);" />.

I know we just released v1.0.0. But is this direction worthwhile? If so, there are more things I'd need to clean up in preparation for it.

[basham]

If only needing rvt-icons.css, then perhaps rivet.css could embed a subset of the icons directly in itself, to better serve the things it needs.

[basham]

Maybe a third downside is that this new approach isn't compatible with IE, unlike internal SVG sprites (using rvt-icons.js).

[levimcg]

@basham This is an interesting approach. I do like the idea of a CSS only (or mostly anyway) approach.

My gut feeling is that we are kind of optimizing before we really know anything about how folks are/will be using the icons. 🤔

I think that if there was a glaring performance win, or make it easier from a developer experience perspective this would definitely be something worth spending time on, but I'm not seeing that here. I could totally be wrong.

Just an FYI, most of our team will be out all next week for the holiday, but I'll definitely do my best to touch base on any comments when I'm back the week after.

[basham]

I'm not 100% convinced either. I'm fine leaving this draft open for however long it takes to discuss it and get feedback on it. I found it a good exercise to try it out. But I would prioritize this work really low on your team's backlog — especially since we already have a good enough solution in place with v1.0.0.

[levimcg]

Perfect, that sounds like a plan to me!

[basham]

I'm going to close this, since we're going all-in on custom elements, as of the v2 and upcoming v3 release.