Shaking Trees in Font Awesome 5.1
The Ents have decided…We have all agreed… that you two are not Orcs.
This all started with an issue on our private Font-Awesome-Pro GitHub repository. Our support for tree shaking was shaky at best, requiring an additional tool-specific configuration that was easy to miss.
We started down the path to fix the root issue related to tree shaking and ended up mixing in a little TypeScript, reconfiguring how we do packages, and changing how our underlying API is organized. This quickly became a breaking change. And Font Awesome 5.1 became necessary to signal the upgrade from 5.0.
Who is this article for?
- Anyone who is using or wants to use NPM (package.json) to install Font Awesome
- Our JavaScript developers using our Font Awesome components (Vue, React, Ember, or Angular)
- Someone who is using pseudo-elements with SVG (if you’ve toggled searchPseudoElements to true–that’s you!)
☎️ Beta testers we need your help! Font Awesome 5.1 is a pre-release and we are asking you to help us find any issues so we can get it out the door.
If you can help: read the upgrading guides for the main project. And if you use the Vue component, the React component, the Ember component, or the Angular component we’ve got specific guides for them.
New documention for the pre-release is available on https://fontawesome.com/preview/get-started.
A new package for quick-n-easy Font Awesome integration
The Font Awesome CDN and the beta release of Font Awesome Pro CDN are among the easiest ways to get started with Font Awesome. It provides access to our SVG with JS version, our Web Fonts with CSS version, and SVG sprites.
Today we are happy to announce that these same easy-to-use files as well as Sass and Less pre-processor files are available to install via NPM. This is great for people who like the easy, automatic nature of the CDN but want to install it with a package manager and use it in a packaging or bundling tool.
A new package for components and library developers
We have also released @fortawesome/fontawesome-svg-core and a set of icon content packages like @fortawesome/free-solid-svg-icons to serve as the foundation of our official Font Awesome components and other library developers.
These packages are SVG-specific. They are low level APIs and more advanced. We recommended these to anyone who wants to build on top of the Font Awesome SVG functionality and for anyone who wants tree shaking in their JavaScript build pipelines.
What has changed in the JavaScript “core” and “icon content” packages?
Tree shaking is now supported out-of-the-box for our @fortawesome/*-svg-icons icon content packages. The following ES6 import:
import { faCoffee } from '@fortawesome/free-solid-svg-icons'will include only the single icon in your final .js file when using tools like Webpack and Rollup that support tree shaking.
We now have TypeScript support in the main @fortawesome/fontawesome-svg-core library, React component, and Angular component.
Default exports have been removed because we became convinced that they were going to be a continuing headache for us and our users. We now use only named exports and we recommend ES6 destructuring assignment with curly braces:
# Old way
import fontawesome from '@fontawesome/fontawesome'# New way
import { library } from '@fontawesome/fontawesome-svg-core'
Find out more
New documention for the pre-release is available on https://fontawesome.com/preview/get-started and https://fontawesome.com/preview/how-to-use.
Read the upgrading guides for the main project, the Vue component, the React component, the Ember component, and the Angular component.
If you run into any issues please let us know by filing a GitHub issue in the appropriate repository or sending us a message to hello@fontawesome.com.
