Hey,
we’d love to use Siemens IX in coming projects. Especially in an web based HMI. But the issue we ran into is the bundle size of the app.
The Build size jumps to almost 4MB from just importing the lib (and especially the icons). Is there a way to decrease this? Maybe not import all the icons, but only the icons that are used? Is there a way we could still use siemens-ix with our requirement of small bundle size?
Hi can you please give us more information regarding:
Which Framework do you use react/angular?
Which version of the library?
How did you bundle the project (tooling etc)
Hey daniel,
yeah we use Angular (ix-angular: ^2.1.1) and were using the angular builder (which i think just uses webpack bundler in the background).
Which angular version?
ANgular version 17.2
Is your Angular 17 project a a standalone project?
No, we first setup a standalone project but ran into issues.
The current project is setup with a main module and not standalone.
Were pretty open to version changes, we just intuitivley used the most recent versions. Is there a specific version for angular + library where the bundle sizes are known to be optimal?
Just tested it with a new angular 17 project not standalone.
Using ix-icons and ix-button with an item, bundle size is around 700kb.
Application bundle generation complete. [4.109 seconds]
▲ [WARNING] bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 214.94 kB with a total of 714.94 kB.
can you please give us more information about the chunk sizes of the production build?
My problem lies in the total size. The initial load is 648kB. But the lazy chunk files are huge:
chunk-FMEDZVYL.js | ix-icon-entry-a962d3ed | 946.67 kB | 160.28 kB
chunk-PK7FWOBW.js | ix-icon-entry | 946.67 kB | 160.08 kB
chunk-XWK7GOXD.js | core-js-f6c288b5 | 91.91 kB | 27.85 kB
chunk-OEDXQYMF.js | core-js | 91.79 kB | 27.80 kB
We only have limited space on some hardware where we maybe plan to use siemens ix
What is your limited spcae in detail?
The most restrictive would be max 4Mbyte in total, so we plan a bundle size of 2-3MB.
Alright! Thanks for your input. Currently we are working on solution to optimize the bundle size of the icons itself.
After the first use of the ix-icon component all icons will be loaded via chunk, this is necessary to satisfy the current implementation of the ix library.
We plan to integrate to optimzed icon library as part of the v3 (breaking change). However I will discuss the problem within the team maybe we can find a intermidiate solution.
Alright thanks for the consideration. The Team really liked the Design and use of the lib, so we look forward to it if its possible.
Thank you for hearing us!
We also subscribe to the idea to be able to modular import.
We have also filesize, even file count! contains on S7 15xx and 12xx PLCs.
The Ix module just bundles all the things even though we might never invoke some components.
We would prefer not to be running a forked ix version just to exclude parts of ix module.
Touching the builded module seems a bit hackery and we would like to avoid it.
They’ll add it in 3.0.0 @antonin.dach
feat: remove bundle svg data by danielleroux · Pull Request #64 · siemens/ix-icons (github.com)
Nice, any news on excluding the other stuff ? Not just treeshaking the icons.
Do you mean angular standalone components (without importing the complete Module)?
yes, if I don’t use modals, dialogs or perhaps about & legal, we should be able to skip bundling it.
We know the risks 
