Deliver icons as backgrounds for high-traffic situations

[aaronshekey]

Went for a long drive today and may have accidentally come up with a solution allowing for the same flexibility in our icon set that SVG allows, only for PNG.

Proposal

1. Either export from Figma, or build PNGs from our optimized SVG set @2x and #000.
2. In a .css file, export something like .png-icon.iconLink with background-image: url(../path/to/Link.png)
3. Build atomic coloring classes for .png-icon that's based on CSS filters using this tool. eg. .png-icon.iconLink.fc-orange-400. These classes will also have their dark mode equivalents.
4. Provide a PNG helper in the same way we do SVG. eg. @Png.Link.With("fc-orange-400")
5. Profit.

Any thoughts before I hack together a proof of concept?

Things to solve / discover:

1. General path issues. How do we keep this self-contained as a straight dependency, and integrate into Stack Overflow
2. Inheritance. If we have <div class="fc-orange-400"><div class="png-icon"></div></div>, we'll probably want that icon to be orange.
3. Will just delivering the retina version of these be enough, or will scaling a 2x image on 1x screens be good enough?
4. ???

[b-kelly]

This is probably a naive question, but why a png and not our svgs? Svg background-image support is covered by our supported browsers (see MDN).

We still won't be able to style them since they're not in the DOM, but it would remove the need for another image format.

I did some brief googling and happened upon mask-image. Basically, use an svg as a mask over the element, setting background-color to our current state (dark mode, selected). Looks like browser support is covered for us.

We could solve the pathing issues by embedding the svg itself into the less file. We can then ship this less file to be included into other projects as needed. It'll be a slightly larger hit at first request (loading every icon on the short list vs as needed), but the file will cache, so not an issue for future requests.

Of course, I haven't tested any of this so... take it with a grain of salt.

[aaronshekey]

Yeah! Makes sense to skip PNGs entirely! Lemme dig into this. There's either masking or filtering. Let's explore both!

[aaronshekey]

This codepen currently uses mask-image. We might run into some issues since the icon set will be quite large, and has to be doubled for -webkit-mask-image usage. Could be solved by referencing a single SVG variable with the URL as the value.

https://codepen.io/aaronshekey/pen/abNNmBa

Another interesting side effect is we'll have to add the dimensions into each icon. We generally hold to 18px by 18px, but occasionally an icon will need to be 20px wide. Additionally, we have our 14px by 14px variations.

Very interesting sidenote: These look way better in legacy edge than the direct SVG. 🤔

[aaronshekey]

I've beefed up the test cases in that Codepen to see what happens with .native. With our directly-injected SVG, we can use our CSS variables inside SVG and they react to dark mode as expected. Unfortunately, mask-image doesn't work with native colors, so we need to switch to background-image in the .native case.

[b-kelly]

So, coincidentally I needed this exact type of thing for a side project I was working on last night and I worked something up that I'm actually pretty happy with. The code is short, simple and very flexible. Check the very bottom of the page where I turn a "filled" icon into an "outlined" icon just by adding a Stacks bg-* class and a fc-* class (and nothing else).

Knowing how you feel about font icons, I hate to say that using these feels a lot like font icons (which, to me, is a good thing). We're getting a lot of the benefits with very few of the drawbacks. I think we might be on to something with this.

https://codepen.io/bk-SO/pen/xxVVWPL

[abovedave]

Adding one thing in here - 2x PNGs would be handy for emails. I was thinking we could colour in the build script perhaps orange-500, blue-500 and black-600.

Would be much easier to maintain using the helper in the email templates.

[b-kelly]

@abovedave Good call, I never even thought about supporting for emails. I wonder how css background image support is on that end

[aaronshekey]

I also have a hunch that if this alternate method is truly about performance both in rendering and page weight, pngs might be the way to go. There are a ton of scripts out there that can take a directory of SVG and turn them into sprite sheets.

We can go that method for super-tuned Core experiences, and then we can go pre-baked @2x spots for email methods. So much to hack on here. Yowza!