font-class

Tree-shaker for Font Awesome 6.7.2 Pro.

The fonts are taken from here

Objective

This package aims to provide a customizable component for each icon in Font Awesome 6.7.2 Pro for free, but with some peculiarities:

• Non global: There are no global clas1s like "fad", "fa-circle-xmark", etc...
• Single font: Every icon is in one single font
• Completely tree shakable: The font contains only the specific icons you need
• Typed: TypeScript is aware of every icon shipped with this package and, for each icon, provides a property containing its CSS class
• Non compiled: The package is not compiled, it ships directly in TypeScript and SCSS

Usage

Choose a file to store your configuration in and start importing your icons as follows

import { createFont } from "font-class";

const {
  solid: { dollarSign },
  duotone: {
    circleXmark,
    faceAngry: doThisToMakeAliases
  }
} = createFont();

Once you've done that run the following command to do the tree-shaking

npx font-class path/to/your/file

The script will pass the right arguments to the createFont() call according to your configuration. The file will be parsed as TSX

Always remember to run the command again when you add/remove or even move one of the icons inside of that object destructuring

I suggest you to put your icons inside a namespace as follows

namespace icon {
  export const {
    solid: { dollarSign },
    duotone: {
      circleXmark,
      faceAngry: doThisToMakeAliases
    }
  } = createFont();
}

To use it you just need style a span with the class of your desired icon

return <span class={icon.dollarSign} />

Styles

The library also provides a couple of style sheets, each containing some classes.

Each class can also be applied to non-icons except generic.reverse and the ones from positioning

anim

Style sheet that contains animations

• beat (fa-beat): Makes the element increase and decrease in size
• fade (fa-fade): Makes the element "blink"
• beatFade (fa-beat-fade): Sum of anim.beat and anim.fade
• bounce (fa-bounce): Makes the element do a little jump
• flip (fa-flip): Make the element do a 3D rotation around the Y axis
• shake (fa-shake): Makes the element rotate a bit back and forward multiple times
• spin (fa-spin): Makes the element rotate
• pulse (fa-pulse, fa-spin-pulse): Does the same thing as anim.spin, but "lagging"

generic

Style sheets that contains generic functionalities

• reverse (fa-spin-reverse): Sets IconOpts.animationDirection to "reverse"
• rotateBy (fa-rotate-by): Rotates the element by IconOpts.rotateAngle
• rotate90 (fa-rotate-90): Rotates the element by 90°
• rotate180 (fa-rotate-180): Rotates the element by 180°
• rotate270 (fa-rotate-270): Rotates the element by 270°
• flipHorizontal (fa-flip-horizontal): Flips the element horizontally
• flipVertical (fa-flip-vertical): Flips the element vertically
• flipBoth (fa-flip-both): Flips the element horizontally and vertically

positioning

Style sheets that contains positioning and sizing utilities

• xs2 (fa-2xs): One of the t-shirt based sizes
• xs (fa-xs): One of the t-shirt based sizes
• sm (fa-sm): One of the t-shirt based sizes
• lg (fa-lg): One of the t-shirt based sizes
• xl (fa-xl): One of the t-shirt based sizes
• xl2 (fa-2xl): One of the t-shirt based sizes
• fixedWidth (fa-fw): Forces all the icons with this class to have the same width
• ul (fa-ul): Allows to use icons as markers of an unordered list (To use with positioning.li)
• li (fa-li): Uses an icon as the marker for the current list item (To use with positioning.ul)

Utility

Utilities for customization and primitives

CSS_VARIABLE_PREFIX

The prefix each customization CSS variable has

IconOpts

Type that lists the available customization CSS variables

createFont()

Creates a new font and outputs the classes of its icons

It also triggers the tree-shaker tool

custom()

Takes an IconOpts as argument and prefixes each of its properties with CSS_VARIABLE_PREFIX

import { anim, custom } from "font-class";
import { icon } from "some/file";

function App() {
  return <>
    <span
      class={`${icon.spinnerThird} ${anim.spin}`}
      style={custom({ animationDuration: "2s" })}
    />
  </>
}

The values of customization variables are inherited and can be combined with normal CSS

// ...
return <>
  <div style={{ color: "red", ...custom({ animationDuration: "2s" }) }}>
    Text
    <span class={`${icon.spinnerThird} ${anim.spin}`} />
  </div>
</>
// ...