Align SVG Icons to Text and Say Goodbye to Font Icons
In building my own SVG-based icon system, I’ve run into (and mostly solved) these same issues.
Why should I care about how SVGs are styled?
If you’ve ever used font icon systems like Font Awesome you know how easy it is to add to a project and get going. The icons align to your text easily and can be modified by changing the font-size of the element. There is no clearly defined way for styling an SVG icon system. I’ve seen some systems custom style and place each icon in their library. This route sounds painfully unsustainable if you utilize more than 15 icons in your UI.
Can it scale like an icon font?
To emulate the font-size scaling I use a class to set the SVG size to 1em by 1em. This means that if your title text is a 48px font size the SVG will be 48px by 48px. This works nicely for components like buttons and inputs when you want to add an icon. This also empowers you to pass a font size to the element via modifier class or inlined CSS. Using font-size to determine the size of your icon makes your life a little easier.
Code language: CSS
.svg-icon svg {
height: 1em;
width: 1em;
}
My SVG won’t align to with my text. How do I fix this?
The downside is that a DOM element on it’s own doesn’t align nicely with text. To counter this I wrote the .svg-icon handler class to hold the size and be relative positioned so that I can absolute position the SVG inside of it. Moving the icon down by “-0.125em” allows me to pull down the icon by 12.5% at any scale.
The first example shows that DOM elements align to the baseline of text by default. However, since our icon is already properly scaled to consider the baseline, we need to pull it down for the baseline to truly align. At this size the distance is 6px away, 6px/48px = ⅛ or 12.5%. In the second example, pulling the icon down by -0.125em places the icon onto the proper baseline of the text.
Code language: CSS
.svg-icon {
display: inline-flex;
align-self: center;
position: relative;
height: 1em;
width: 1em;
}
.svg-icon svg {
height:1em;
width:1em;
}
.svg-icon.svg-baseline svg {
bottom: -0.125em;
position: absolute;
}
