Font-awesome-minify-plugin NPM

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:

Detect all used icons (using the prefix, globPattern and srcDir options)
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
Replace the resolved CSS files with the new, temporary CSS files