I have worked on projects that were initially implementing the webfont version (which was some 500kB+) but then switched them over to using either a subset or an SVG Core and saw the FontAwesome portion of their bundle size plummet to a few kB. Unfortunately I don't have those projects handy to pull out the exact numbers for you.
Personally, I use both the SVG Core (in React projects) and Kits (in more monolithic projects).
With the SVG Core, I'm only importing the specific icons I use in each project, and only in the styles I choose (regular, solid, light, etc.). When bundled, the only FontAwesome data included is the SVG markup and the CSS required to display them.
With a Kit, JavaScript is used to set up a MutationObserver that batches changes in the DOM to replace <i> elements with <svg> elements, serving the SVG markup and styles from a global CDN. All of this happens during client-side render and doesn't hold-up the initial load of the page.
The tricky thing about statistics is always going to be interpretation. Some will read the data and conclude that the solution is bloated and slow, while others will read the same data and see it as lightweight and fast. I feel it comes down to "horses for courses"—one implementation will be great for one project, but not so great for another.
I'd encourage you to try implementing FontAwesome yourself, take some measurements, and see which solution might suit you best. And if it turns out that none of them work well for your specific use-case, then that's okay too.
Thanks again!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
That's a really good question, @dbarabashdev.
The short answers are:
The longer answers are:
I have worked on projects that were initially implementing the webfont version (which was some 500kB+) but then switched them over to using either a subset or an SVG Core and saw the FontAwesome portion of their bundle size plummet to a few kB. Unfortunately I don't have those projects handy to pull out the exact numbers for you.
The FontAwesome documentation has a great section on performance which details the complexities around each implementation method. Generally, your requirements should help inform which implementation will work best for your needs.
Personally, I use both the SVG Core (in React projects) and Kits (in more monolithic projects).
With the SVG Core, I'm only importing the specific icons I use in each project, and only in the styles I choose (regular, solid, light, etc.). When bundled, the only FontAwesome data included is the SVG markup and the CSS required to display them.
With a Kit, JavaScript is used to set up a MutationObserver that batches changes in the DOM to replace
<i>elements with<svg>elements, serving the SVG markup and styles from a global CDN. All of this happens during client-side render and doesn't hold-up the initial load of the page.The tricky thing about statistics is always going to be interpretation. Some will read the data and conclude that the solution is bloated and slow, while others will read the same data and see it as lightweight and fast. I feel it comes down to "horses for courses"—one implementation will be great for one project, but not so great for another.
I'd encourage you to try implementing FontAwesome yourself, take some measurements, and see which solution might suit you best. And if it turns out that none of them work well for your specific use-case, then that's okay too.
Thanks again!