Currently, I am in the process of developing a website using node.js + express.js and implementing font-awesome for icons.
The local hosting of Font-awesome has resulted in a 1.2 MB JS file [font-awesome.js], even though we are only utilizing 10-15 icons. I am looking to reduce the size of this file.
Option that makes sense to me:
Upon inspecting the JS file, I noticed an array named icons containing SVG content for all icons. By removing unnecessary icons from this array, I can decrease the file size. However, this method may be inconvenient if I need to use additional icons in the future.
Option that I find confusing:
I came across the [svc-javascript-core] package (https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core) which allows the creation of customized subsets of icons. It also mentions the use of deep-imports for systems without tree-shaking capabilities (https://fontawesome.com/how-to-use/javascript-api/other/tree-shaking).
However, I have some concerns:
- Will this result in generating a new JS file with only the required subset of icons (or do I need to write code for this)?
- How will this impact the integration of font-awesome in my web pages?
Your insights on this matter would be greatly appreciated.