Font Awesome Minify Plugin

A Webpack Plugin that minifies your included FontAwesome 5 CSS and fonts by only bundling the icons you are actually using.

Notice: If you are using FontAwesome 4.x, you should be using version 0.1 of this plugin!

Install

npm install --save-dev font-awesome-minify-plugin
# or
yarn add --dev font-awesome-minify-plugin

Usage

const FontAwesomeMinifyPlugin = require("font-awesome-minify-plugin");

module.exports = {
  // ...
  plugins: [
    // ...
    new FontAwesomeMinifyPlugin({
      srcDir: helpers.root("app/")
    })
  ]
}

TypeScript example:

import "@fortawesome/fontawesome-free-webfonts/css/fontawesome.css";
import "@fortawesome/fontawesome-free-webfonts/css/fa-regular.css";
import "@fortawesome/fontawesome-free-webfonts/css/fa-solid.css";
import "@fortawesome/fontawesome-free-webfonts/css/fa-brands.css";

Options

new FontAwesomeMinifyPlugin(options: object)

|Name |Type |Default |Description | |:--------------: |:---------------:|:----------------------------|:----------------------------------------------------------------------------------------------------------| |additionalClasses|{Array<String>}|[] |Additional FontAwesome CSS classes that should be included regardless of whether they occur or not | |blacklist |{Array<String>}|All non-icon classes |CSS Classes that are prohibited from being included | |prefix |{String} |fa |The icon prefix | |srcDir |{String} |./ |Determines the folder in which to look for the usage of FontAwesome classes, see globPattern as well | |globPattern |{String} |**/* |Determines the glob pattern that determines which files are analyzed| |debug |{Boolean} |false |Print additional debug information|

How it works

The plugin hooks into the process of Webpack's module resolution and when a file matching any of FontAwesome's CSS filenames is found it does the following:

1. Detect all used icons (using the prefix, globPattern and srcDir options)
2. Depending on the type of the detected CSS file (either the "fontawesome.css" which contains all codepoints, or a style file, such as "fa-brands.css")
   1. Main file ("fontawesome.css"): Build a new CSS file that only contains the used codepoints
   2. Style file (e.g. "fa-brands.css"):
      1. Extract the SVG path from the file and build a new SVG, containing only the used glyphs
      2. Create a new CSS file pointing to the new SVG file
3. Replace the resolved CSS files with the new, temporary CSS files

Acknowledgments

I would like to express my gratitude towards these projects:

• svg2ttf
• ttf2eot
• ttf2woff
• ttf2woff2
• xml2js

Without them, this plugin wouldn't be possible.

Thanks to the people behind the awesome FontAwesome library as well!