Discussion on: The secret that the fonts industry doesn't want you to know

View post

Replies for: I hate icon fonts and use this technique either with SVG sprites (symbols) and icon components. You could also use sizing in em to reach similar e...

Interesting, how do you manage your SVG sprites?

And yes indeed, in that case the em sizing would have been more appropriate, thanks for spotting.

Usually, I use SVG icon components when working with Vue or React, but sometimes when I build classic websites (eg. using PHP for rendering) I place all icons in <symbol> tags in hidden <svg> with viewBox property and use currentColor where necessary.

In the end, I have something like this:

<svg style="display: none" xmlns="..." otherReqiuredAttrs="...">
  <symbol id="icon-user" veiwBox="0 0 20 20" fill="currentColor" storke="none">
    <!-- content of SVG from graphic editor -->
    <path d="..." fill="none" stroke="currentColor" />
  </symbol>
</svg>

<!-- Use an icon -->
<button class="button">
  <svg class="icon">
    <use xlink:href="#icon-user" />
  </svg>
  Login
</button>

For .icon you can use something like this

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  width: 1em;
  pointer-events: none;
  stroke-width: 0;
  stroke: currentColor;
  vertical-align: middle;

  &[height],
  &[width] {
    height: auto;
    width: auto;
  }
}