FontAwesome Selective Import Icon To Reduce Size For Webpack

Nov 29, 2017

Since version 0.0.17 (or pro version 5.0.0-rc5), you can selectively import svg font icon to reduce the javacript file size.

This following will include faUser icon only and don't include the rest (webpack will not package them).

import faUser from '@fortawesome/fontawesome-free-solid/faUser'import fontawesome from '@fortawesome/fontawesome'fontawesome.library.add(faUser)

You can also use the following syntax (with Tree Shaking), but UglifyJsPlugin must be used.

NOTE: Since fontawesome-pro-5.0.4, the following webpack configuration is required to enable Tree Shaking.

Edit webpack.conf.js.

module.exports = {  // ...  resolve: {    alias: {      '@fortawesome/fontawesome-free-solid$': '@fortawesome/fontawesome-free-solid/shakable.es.js'    }  }}
import { faUser } from '@fortawesome/fontawesome-free-solid'

The following code will import all the icons thus increase the file size to the maximum.

import faUser from '@fortawesome/fontawesome-free-solid'
import faSolid from '@fortawesome/fontawesome-free-solid'const faUser = faSolid.faUser

References:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.