The SVG Core library includes a Plugins architecture so you can limit the file size and improve performance with only the features you need.
Font Awesome Can Do a Lot
Here are the plugins:
|Plugin name ||What it does|
|InjectCSS ||Adds CSS to the |
<head> of the page that is needed to display icons
|ReplaceElements ||Replaces |
<i> elements with
|Layers ||Support for layers|
|LayersCounter ||Support for layer counters|
|LayersText ||Support for layer text|
|PseudoElements ||Support for pseudo-elements|
|MutationObserver ||Watches the page (DOM) for changes and replaces elements (|
|PowerTransforms ||Support for Power Transforms|
|Masks ||Support for masking|
|MissingIconIndicator ||Mark missing icons with an animated indicator|
|SvgSymbols ||Support for SVG symbols|
When you import anything from
@fortawesome/fontawesome-svg-core it comes with all batteries included.
But with a few small changes you can pick the plugins you wish to use. This saves bytes and can improve performance if you aren't wasting time doing unnecessary things.
This example is using Rollup.js(opens new window) but the same principles apply to most other projects that use Webpack or even tools like ESBuild.
This will create a
package.json file in the
Next up is installing some dependencies for Rollup and Font Awesome. (Don't act surprised, you kinda knew we'd be installing some deps didn't you?)
Open a terminal in the current directory and we'll run Rollup with
Open another terminal in the current directory and we'll run a small HTTP server:
Load this up in the browser to see an alien icon.
Switching to Plugins
While the icons have been subsetted you are still including every single one of the features Font Awesome provides.
Since we've changed
rollup.config.js we need to stop and re-start. Type CTRL+C and then run Rollup again.
dist/fontawesome.js to use our
What to Expect
Compare the file-sizes before and after using the plugin system.
Well, butter my bread! That's 16k saved. Using "lite" may be a bit generous, but
we'll be continuing to improve this API as time goes on. This architecture also
promises to open up some new possibilities with Font Awesome in the future.