Using icons in react app results in huge bundles

microsoft / fluentui-system-icons

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

https://aka.ms/fluentui-system-icons

MIT License

5.9k stars 518 forks source link

Using icons in react app results in huge bundles #522

Closed Aidam1 closed 1 year ago

Aidam1 commented 1 year ago

When I import only one icon, the bundle size increases significantly, because it bundles all icons that are in the same chunk. So for example, if I want to use just 3 icons, but each of them is in different chunk (@fluentui/react-icons/lib/icons), it will bundle several hundred icons, even if I don't use them in my project.

Is there any way to bundle only the icon that I'm actually using?

Aidam1 commented 1 year ago

Nevermind, it seems that whole chunks are included only in development. Only necessary icons are included in build bundle.