[RFC] Consider removing font-awesome

[joshuaellis]

Discussion report

I've been doing some investigations around bundle size (namely the design system and it's integration with the admin application) and noticed how large the fortawesome package is (see image below)

It accounts for ~40% of the bundle size, I appreciate it's been chunked but i'm wondering if it's really necessary to use an external library? (side note) are we lazy loading its usage? Could we find either a leaner library or one that's significantly smaller etc, or perhaps enhance the @strapi/icons and use that.

If we want to tackle the bundle size that we pass to the client really then this topic needs to be approached.

Steps to reproduce the behavior

1. run yarn analyze:bundle in packages/core/admin
2. see report and investigate yourself.

cc @gu-stav / @ronronscelestes / @maevalienard

[gu-stav]

As I've mentioned on Slack: I'm all in for that. The size of that dependency is just crazy. It costs our users a lot of money, makes the overall performance worse, and will have the same implications soon for us on the cloud. We would see a considerable performance benefit by removing that.

The most challenging thing will be to refactor the icons for components: currently, users can select from all available icons, which is the reason we need to bundle all of them. If we want to eliminate it, we need to find a replacement to make components visually distinct for content editors.

[joshuaellis]

It costs our users a lot of money, makes the overall performance worse, and will have the same implications soon for us on the cloud.

This is a really good point. I'm not sure how billing is done on cloud, do they get charged for bandwidth when accessing the admin panel? I would assume so.

[maevalienard]

All in for that too. We were already discussing that while building v4 and at the time, I cherry picked some icons to replace the library we have in the CTB to have less icons and stop being dependent from font-awesome.
I'm not sure how exactly I could help to move on with this topic so don't hesitate to tell me :)

[derrickmehaffy]

Don't we use FA for the component "icon picker" (of which I get several comments from users and customers alike that ask why we even have that)

[maevalienard]

Indeed Derrick, that's what I meant by replacing the library we have in the CTB actually :D

[CleberRossi]

Hello,
Found this discuttion about the size of the bundle.

FortAwesome/react-fontawesome#70

We need to import expliciting the component want in order of the webback be able to only import what you need.

I opened this PR : #14579

However I am worried about some content-type builder tests I had to update the snapshot and I'm not sure I am doing it right. Can you guys help?

[soupette]

100% aligned with dropping FA!

[WalkingPizza]

You should consider just yeeting the icons from components altogether, they are painfully annoying to pick because of the limited selection and don't really serve a purpose that is not purely aesthetic.

I am pretty confident Maeva can find a way to make the CTB look good without those icons (eg. using the component's initials instead).