FontAwesome Selective Import Icon To Reduce Size For Webpack

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:

• https://www.npmjs.com/package/@fortawesome/fontawesome
• https://fontawesome.com/how-to-use/use-with-node-js