Quest to make a usable SVG mask based icon system

June 25, 2020

As part of my development for KeyMason, I wanted to make a simple icon system based on SVG mask.

The reason is that I want vector icons that can be colorized without puking all over the HTML. This means SVG img tags are no good, because you can't colorize them. Inline SVG are too messy on the HTML side. This just leaves SVG masks which lets you change color via background color.

So I thought, let's define width and height for each icon and link to the appropriate SVG file and there you go!

Alas, there's a problem with positioning.

Vertical align inline-block element and font-size

It turns out that when you make an element inline-block, it will position itself according to font height instead of container height.

What this means is that vertical-align will behave very unexpectedly, because "middle" is not the middle of the container, but the middle of where a line of text, at current font-size, will sit at, which dips belows the visual mid-point.

What this also means, is that if your inline-block element is shorter than the line-height of the current font, you will see phantom paddings at the top and/or bottom of your inline-block element depending on its vertical alignment.

How do you solve it?

The easiest way is to use display: inline instead, but then you can't control height, which is no good for icons.

This is not an issue with img tags, because those are special inline element that can have height applied to them.