Font-awesome: Generate a JS file with required icons only

[NolanCrochot]

Hi,

I'm aware that we can import SVG individually as mentionned in this documentation in order to reduce the total weight of embed icons.

However, the advantage of the JS version of FontAwesome is the capability to use the "fa" class on "i" tag to quickly generate an entiere SVG (and a "simpliest way" to use CSS properties by the way, with icons behaving like fonts). If we choose to download SVG one by one and import them individually, we must get by without this feature.

I wonder if it currently exists (or if it's envisaged) to enable the user to select several icons he needs among the whole set of icons (in the main website of FontAwesome), then compile them in a JS script, like the existing all.min.js, but which only imports thoses choosen icons. A kind of custom.min.js

Currently the weight of the FA JS file (all.min.js) is in the order of 1 Mo, which is a bit heavy for a JS file. Even more when we need only a set of 15/20 icons among all of those available (1409). I presume this idea will help to reduce significantly the weight of the library by avoiding thousands lines of unused SVG strings.

Or maybe you've a better alternative to suggest me ?

Thank you in advance,

N.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I wonder if it currently exists (or if it's envisaged) to enable the user to select several icons he needs among the whole set of icons (in the main website of FontAwesome), then compile them in a JS script, like the existing all.min.js, but which only imports thoses choosen icons. A kind of custom.min.js

Yes, it does exist. It is based on the tree-shaking functionality of webpack. You can read more here: https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking

Hope it helps

Closing here

[NolanCrochot]

Hi,

Thank you very much for the answer. I though this will easy but, I finally can't manage to use this way...

I'm not really comfortable with webpack.
I managed to compile a bundle importing the example (fa-coffee) but nothing happened in the result.
I wonder if tree shaking is the solution, I mean, I'll get some functions of the whole FA script, importing some icons, but after that, how can I compile my lib and make it self-sufficient ?

[tagliala]

Hi @NolanCrochot, sorry for the late reply

You can manually edit the source javascript: https://fontawesome.com/how-to-use/on-the-web/other-topics/troubleshooting#subset

https://github.com/FortAwesome/Font-Awesome/blob/master/svg-with-js/js/fa-brands.js#L118
https://github.com/FortAwesome/Font-Awesome/blob/master/svg-with-js/js/fa-regular.js#L118
https://github.com/FortAwesome/Font-Awesome/blob/master/svg-with-js/js/fa-solid.js#L118

Would that work for you?

[NolanCrochot]

Hi,

Thank you for the reply.

Unfortunately not... Using this code imports the whole brands and solid SVG icons in my bundle.js :

import { library } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'

library.add(faStroopwafel, faTwitter)

But, I think I didn't really get the utility of tree shacking from the start.
If I well understood, those kind of subsets are used in order to call some SVG icons in a React / Rollup application, or other technologies that support tree shaking.

This process is known as tree shaking. Rollup and Webpack 2+ are a couple of tools that support tree shaking

What I was trying to do is a sort of "tiny and independent" js FA library with just a dozen of brand icons.
So I could use it after that in an external "classic" (no-react based) website. So I think isn't really possible. I'm sorry for the misunderstanding...