[GH-ISSUE #895] Bundle size improvements #423

New issue

Closed

opened 2026-03-03 14:38:17 +03:00 by kerem · 3 comments

kerem commented

2026-03-03 14:38:17 +03:00

Owner

Originally created by @AmitMY on GitHub (Dec 6, 2021).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/895

The entire bundle size of the SASS, compiled with angular, is around 46kb.

You are allowing a selection of flags, which is great to reduce that size, but there are other avenues to take:

allow disabling squared / disabling rectangle. My app for example, only uses squared icons: (44% saving, uncompressed)

~~.flag-icon-mm[_ngcontent-%COMP%]{background-image:url(mm.3e459345645bf834.svg)}~~
.flag-icon-mm.flag-icon-squared[_ngcontent-%COMP%]{background-image:url(mm.88bcb5e02683d841.svg)}

change class names .flag-icon-xx to .fi-xx, .flag-icon-xx.flag-icon-squared to .fis-xx (18% saving, uncompressed)

.fi-mm[_ngcontent-%COMP%]{background-image:url(mm.3e459345645bf834.svg)}~~
.fis-mm[_ngcontent-%COMP%]{background-image:url(mm.88bcb5e02683d841.svg)}

Originally created by @AmitMY on GitHub (Dec 6, 2021). Original GitHub issue: https://github.com/lipis/flag-icons/issues/895 The entire bundle size of the SASS, compiled with angular, is around 46kb. You are allowing a selection of flags, which is great to reduce that size, but there are other avenues to take: 1. allow disabling squared / disabling rectangle. My app for example, only uses squared icons: (44% saving, uncompressed) >~~.flag-icon-mm[_ngcontent-%COMP%]{background-image:url(mm.3e459345645bf834.svg)}~~ >.flag-icon-mm.flag-icon-squared[_ngcontent-%COMP%]{background-image:url(mm.88bcb5e02683d841.svg)} 2. change class names `.flag-icon-xx` to `.fi-xx`, `.flag-icon-xx.flag-icon-squared` to `.fis-xx` (18% saving, uncompressed) >.fi-mm[_ngcontent-%COMP%]{background-image:url(mm.3e459345645bf834.svg)}~~ >.fis-mm[_ngcontent-%COMP%]{background-image:url(mm.88bcb5e02683d841.svg)}

kerem closed this issue

2026-03-03 14:38:17 +03:00

kerem commented

2026-03-03 14:38:18 +03:00

Author

Owner

@lipis commented on GitHub (Dec 23, 2021):

What do you think of #902?

@lipis commented on GitHub (Dec 23, 2021): What do you think of #902?

kerem commented

2026-03-03 14:38:18 +03:00

Author

Owner

@AmitMY commented on GitHub (Dec 23, 2021):

Thanks, @lipis
It indeed addresses all concerns of item number 2

An additional check of a new variable to control for which sizes exist (square vs original vs both) in this selector - https://github.com/lipis/flag-icons/pull/902/files#diff-1348f29469a605362817463cf4721b696c6c8b6b5740f0ab4e2fe3577f5fd8ceR21 would address the concerns in item number 1.

I appreciate your effort towards this important goal :)

FYI:
before #902, the min.css file is 34.8kb. after it is 27.3kb.
Download savings are around 35ms on the mobile standard of 1.6Mbps.

@AmitMY commented on GitHub (Dec 23, 2021): Thanks, @lipis It indeed addresses all concerns of item number 2 An additional check of a new variable to control for which sizes exist (square vs original vs both) in this selector - https://github.com/lipis/flag-icons/pull/902/files#diff-1348f29469a605362817463cf4721b696c6c8b6b5740f0ab4e2fe3577f5fd8ceR21 would address the concerns in item number 1. I appreciate your effort towards this important goal :) FYI: before #902, the min.css file is 34.8kb. after it is 27.3kb. Download savings are around 35ms on the mobile standard of 1.6Mbps.

kerem commented

2026-03-03 14:38:18 +03:00

Author

Owner

@lipis commented on GitHub (Dec 28, 2021):

I'll go ahead and merge this and leave the 1.. cause we are delivering the sources as well and if people want it they can easily use that instead of the css files..

@lipis commented on GitHub (Dec 28, 2021): I'll go ahead and merge this and leave the 1.. cause we are delivering the sources as well and if people want it they can easily use that instead of the css files..