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

[tofful]

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

[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.

[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]

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]

@rendinjast what do you think?

[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.