fam
font-awesome-minify-plugin
npm i font-awesome-minify-plugin
fam

font-awesome-minify-plugin

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

by Dominik Hardtke

1.1.0 (see all)License:MITTypeScript:Not Found
npm i font-awesome-minify-plugin
Readme

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)
NameTypeDefaultDescription
additionalClasses{Array<String>}[]Additional FontAwesome CSS classes that should be included regardless of whether they occur or not
blacklist{Array<String>}All non-icon classesCSS Classes that are prohibited from being included
prefix{String}faThe 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}falsePrint 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!

Downloads/wk

16

GitHub Stars

12

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

5

OPEN ISSUES

6

OPEN PRs

8
VersionTagPublished
1.1.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial