Icon Madness

How to use FontAwesome SVGs tailwind style? With optional React flavor.

Tailwind has changed my life. After understanding that I can have the good part of Bootstrap (CSS classes) without the bad part (everyone creating their own classes, jQuery, etc.) - it has been a journey of amazingness.

Now to add to this I fall into love (and I guess many do) the way they use SVG icons and just inline them directly. It is super simple and creates no dependency. Today, I was tempted to use FontAwesome (FA) and checked out their docs for the React lib. OMG 😱3 npm Packages to install (+ more optionally) and then it only starts ... reading the docs and I fell like I'm implementing some rocket science framework - but it was actually just the fonts.

So I was sad - because some of the icons are actually nice. Just before leaving their page, I came across this interesting article about FA SVG Sprites. So I can use FA like this:

      <button>
        <svg>
          <use xlink:href="solid.svg#tv"></use>
        </svg>
        Facebook
      </button>

Well... That does not look bad. Downloading an SVG file instead of their whole fonts and CSS folders seems like a great idea to me. This translates into JSX/TSX as:

      <button>
        <svg>
          <use xlinkHref="solid.svg#tv" />
        </svg>
        Facebook
      </button>

That's easy enough. Now the madness comes... What we really need is setting the color and size the way we want it. And this just happens too easy to be true.

Colors

Tailwind has amazing classes for coloring SVGs. Whereas some will need to color the outline (stroke) and other the fill. The solid font set is called solid because you style it with fill. Whereas the regular set will be styled with stroke. So we can write:

      <button>
        <svg className="fill-current text-teal-500">
          <use xlinkHref="solid.svg#tv" />
        </svg>
        Facebook
      </button>

And we have a teal icon. For an icon from the FA's regular icons ( e.g. regular.svg#tv ) we would simply use tailwinds stroke utility class stroke-current.

Font Size

How about getting our icon in line with the font (something you need very often, no)? Because it can look pretty ugly if you just put that SVG on your button (a bit too big 😅). Turns out this is just too simple.

The best possible way would be that our icon picks up the font size and adapts to it. We could actually tackle this using width and height and passing it em values. 1 EM will relate to your current font size. To take this further, you can very simply create a number of utility classes to make your icons slightly bigger or smaller than your text:

.icon-sm {
  width: 1em;
  height: 1em;
}

.icon {
  width: 1.2em;
  height: 1.2em;
}

.icon-lg {
  width: 1.5em;
  height: 1.5em;
}

... and so on. I hope you get it. I call it .icon but you can just do that however you want! I found that many designers are sizing the icons roughly at the line-height of the font. So in CSS, this defaults to 120% of your font-size. Ergo 1.2em. (Which is horrible - I will explain about this one day...) 🤯

Isn't this amazing? SVG madness with all the comfort of an icon-font. Let me know what you think!

What's next? Well...

It doesn't really end here. We are using an SVG Sprite. We could easily convert it into our own component library and inline it directly e.g. using webpack - this would save us the extra network request + fixes some of the issues you could face (e.g. CORS problems). But I will leave it to you to get creative with that.

✌ Peace!️