Production bundle returns all 6000 icons even when I import only 1 icon

[tofful]

As a dev, I would like to use iconsax library and I would like to use some of the icons, in my case, only one icon:

import { Folder } from 'iconsax-react';

...
return <Folder className={styles.icon} color={iconColor} variant="Bulk" aria-hidden />;
...

when I look at the generated bundle I expect to see one icon with the variant Bulk being generated, but instead, I see that all 6000 icons are included. This brings a lot of performance issues.

Looking at the Chrome DevTools I can see that the icons chunk takes 16 seconds to load when it is not in cache.

Solution To include in the bundle only the icons used. Maybe the import should be something like this

import Folder from 'iconsax-react/Folder';

This way, we could even use it as lazy, please have a look at my simplified code:

import React, { Suspense, lazy } from 'react';

const Folder = lazy(() => import('iconsax-react/Folder')); <--- Lazy import

...
return (
    <Suspense fallback={null}>
        <Folder className={styles.icon} color={iconColor} variant="Bulk" aria-hidden />
    </Suspense>;
)
...

[tofful]

@rendinjast what do you think?

[max-frai]

@tofful I have same problem in react native. I think there is some problem with generation of modules. But didn't have time to look what's wrong.

[rendinjast]

I'm aware of this issue but unfortunately I did not have access to my computer this month to working on it.

@rendinjast what do you think?

that's good idea. I might do that.

[rendinjast]

fixed this issue. version 0.0.4:

version 0.0.6:

please check new version and let me know if there is any issue.

[tofful]

wow great one @rendinjast thanks for pushing up the changes, it didn't address the issue as all icons are still being included in the bundle but at least I can see now a very significant file size reduction which is fantastic. Thank you very much for the prompt reply

[erfanasbari]

@rendinjast it would be great if you could add the ability to import every icon individually.

like this: import Hashtag from "iconsax-react/Hashtag";

This will help reducing compile time in dev environment in frameworks like Nextjs

I tested iconsax-react and it adds 2 seconds to compile time (In my environment). if i could import every icon individually compile time would be reduced.

react-icons done this because of their huge amount of icons: https://www.npmjs.com/package/@react-icons/all-files

[erfanasbari]

And large bundle size problem has been fixed.

Thanks!!!

[erfanasbari]

It looks like i can import icons individually in version 0.0.6 but I get typescript error.

import { CloudSunny } from "iconsax-react/dist/cjs/CloudSunny";

[rendinjast]

It looks like i can import icons individually in version 0.0.6 but I get typescript error.

import { CloudSunny } from "iconsax-react/dist/cjs/CloudSunny";

Yes you can. Can i see the typescript error? Did you try to import from esm?

import { CloudSunny } from "iconsax-react/dist/esm/CloudSunny";

[tofful]

@rendinjast this is the Typescript error that I got when I tried your recommended import syntax

[rendinjast]

@tofful oh. its because when you import icon this way there is no type for that.

create a .d.ts file that contains

declare module 'iconsax-react/dist/esm/*';

[tofful]

great @rendinjast thank you so much, I guess from my side I will just add a // @ts-ignore to the import because I believe maybe the type declaration could come as part of the library someday.

The last question from my side and then I believe we can safely close this issue.

Is it too much hassle to do a default export of the icons? like export default CloudSunny and also export { CloudSunny } this is because it would be great to import icons as lazy or React Component

import CloudSunny from "iconsax-react/dist/esm/CloudSunny";

instead of just being able to import only via:

import { CloudSunny } from "iconsax-react/dist/esm/CloudSunny";

But I kind of found a workaround to use React.lazy without a default export, following this article, for those who are also wanting the same as me, this could be a solution:

https://dev.to/iamandrewluca/react-lazy-without-default-export-4b65 and this one as well https://reactjs.org/docs/code-splitting.html#named-exports

[tofful]

New error found when running React test suit, it seems that it doesn't recognize the import

Please have a look at my screenshot, I am using React with Create React App and not ejected.

[rendinjast]

@tofful version 0.0.7. now you can import default icons. like:

import CloudSunny from "iconsax-react/dist/esm/CloudSunny";

---

the error is because you are using ECMAScript module.

[tofful]

@rendinjast fantastic!! you rock! everything is working as expected. Perhaps the Readme.md file could be updated to reflect this new way of importing icons.

[tofful]

with version v0.0.7 in place, all the defects on this issue have been addressed, therefore is it safe to close this issue and mark it as done.