Great idea if it works reliably. However I’d preserve the previous opacity, this one isn’t very visible.

That's just the very thin tab character from Inconsolata flattened to <path> in SVG.

I'm still working on using <text> nodes here to get proper font rendering (if possible). Wanted to put this PR out for sharing the idea.

(As mentioned Figma flattens all text nodes to <path>s in SVG, and I'm still afraid to use Inkscape 😅, will have to find some other vector edit tool)

You can make the SVG from scratch, it’s just 2 tags (text tag inside svg tag)

Looks like there is no way for SVG backgrounds (either using data: or http:) would inherit properties like font and line-height from parent DOM. Even if that were to happen, it would be very complex to handle, especially baseline was very tricky with background-size.

Instead I'd propose the use of static path elements, this way the backgrounds says consistent on any platform regardless of the font.

Open to other ideas as well.

That’s right 👍 let’s match the current color though

That’s right +1 let’s match the current color though

Done!

This is a clever solution and it appears to work. Let's see if it causes any issues in the real world, I'll publish this today.