font-awesome-minify-plugin

1.1.0 • Public • Published

npm node deps

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:

Without them, this plugin wouldn't be possible.

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

Package Sidebar

Install

npm i font-awesome-minify-plugin

Weekly Downloads

6

Version

1.1.0

License

MIT

Unpacked Size

22.8 kB

Total Files

8

Last publish

Collaborators

  • dhardtke