unfont

Embed Font Awesome icons into HTML with inline SVG:

- __Zero runtime JS__
- __No webpack__ required
- __Instantly__ displays icons during page load
- Up to 10x (–12.5KB) __smaller__ than the SVG + JS core
- Every HTML page loads just the icons it needs
- Streaming HTML support
- Inline styles option for even smaller bundles
- Works with any node-based templating.

Font awesome now has 1600+ icons in the free pack, pushing the bundle to ~200K — a lot of code to only use a couple of icons. It also takes a while to load, and the icons are not rendered while it's loading. Font awesome's SVG + JS core is a JS runtime that dynamically replaces with inline SVG. Smart, but extra 40K (13K gzip) of JS is not always welcome, and still leaves your users with missing icons during script load.

As a lightweight alternative, I made this package that renders font awesome icons into inline SVG during HTML generation. It comes with the standard tradeoffs of inline SVG (no caching), but works well for static HTML websites, and is a perfect fit for critical content.

Table of Contents

- Basic usage
- Inline styles mode
- Comparison with standard FA runtimes
- Alternative designs
- License

Basic usage

> Play around with unfont in the sandbox (but please don't use it client-side)

Install:

``sh
$ npm i --save unfont
$ yarn add unfont
`

Import CSS into your styles bundle (it's just copied over from @fortawesome/fontawesome-svg-core, no need to duplicate if you already run SVG + JS runtime):

`css
@import 'unfont/css/fs.css';
`

You can also import it from JS or to it as per your build setup.

Use in your template:

`js
const { fa } = require('unfont');

// instead of
fa('fab fa-twitter'); // returns inline SVG to directly put into your HTML
`

Add custom classes:

`js
fa('fas fa-camera fa-2x'); //
fa('fas fa-camera block__icon'); //
`

Add attributes:

`js
fa('fas fa-camera', {
attributes: { 'id': 'camera-icon' }
});
//
`

Add inline styles:

`js
fa('fas fa-camera', {
styles: { 'color': 'red' }
});
//
`

__Dynamic node SSR__ (express & co) should work out of the box, but make sure to run your own performance / load tesing and cache as needed, since it's not a primary use case and rendering may be expensive.

__Client-side use__ makes no sense. If you really have to, try rendering icons for dynamic display into a hidden container and using their innerHTML. Never import unfont js into your client bundle.

Inline styles mode

If you only use a few fa- utility classes here and there, or rely on inline styles for critical content, you can opt into inline styles mode with inlineCss option:

`js
fa('fas fa-camera fa-2x', { inlineCss: true })
//
`

This works by statically evaluating font-awesome styles for the given class and should support all fa-* utility classes and respect the styles option. The downside is that you can only override the styles with !important or more inline styles, so existing styling might break.

To use fa-spin or fa-pulse, include unfont/css/faSpin.css for the @keyframes. These styles can also be inlined into a