Skip to content
This repository has been archived by the owner on Aug 11, 2021. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

dhardtke/font-awesome-minify-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm node deps

Font Awesome Minify Plugin

This project is no longer maintained. Please don't use it anymore!

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!

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published