Purge Fontawesome
This webpack plugin allows you to import all icons at once, while Purge Fontawesome will remove all unused icons.
Requirements
webpack >= 4
Installation
Install Purge Fontawesome
npm install purge-fontawesome --save-dev
Install Fontawesome svg core
npm install @fortawesome/fontawesome-svg-core
Install any icon set you need
npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/pro-duotone-svg-icons
npm install @fortawesome/pro-light-svg-icons
npm install @fortawesome/pro-regular-svg-icons
npm install @fortawesome/pro-solid-svg-icons
Usage
Import the core as usual. The icons should be imported trough Purge Fontawesome.
index.js
;; // Requires @fortawesome/free-regular-svg-icons library; dom;
index.html
Include the webpack plugin in your webpack configuration
webpack.config.js
const path = ;const glob = ;const PurgeFontawesomePlugin = ; moduleexports = mode: 'production' entry: './src/index.js' output: path: path filename: 'bundle.js' plugins: paths: glob ;
Boom! Your now over 1MB bundle has been reduced to ~50kb.
Require all installed sets at once
Purge Fontawesome will find all installed sets and require them for you
;; library; dom;
Require each set separately
Free sets
;; // Requires @fortawesome/free-brands-svg-icons; // Requires @fortawesome/free-regular-svg-icons; // Requires @fortawesome/free-solid-svg-icons library; dom;
Pro sets
;; // Requires @fortawesome/pro-duotone-svg-icons; // Requires @fortawesome/pro-light-svg-icons; // Requires @fortawesome/pro-regular-svg-icons; // Requires @fortawesome/pro-solid-svg-icons library; dom;
CSS Pseudo-elements
This plugin also scans for css pseudo elements.
Options
Source paths
Add the paths you want to scan
paths: glob
Multiple paths
paths: glob glob
Specific extensions
Using specific extensions can speed up the scan process
paths: glob paths: glob
Author
Maxim Vanhove Web developer at Starring Jane