React Icons Kit taking too much space in production.

[corupta]

Hi, I'm using one/two icons from feather, typicons, fa, icomoon, md, ikons.

However, doing so results in my bundle.js becoming extremely big, adding it 6 mB

I'm using create-react-app no build, and when I analyze the source with source-map-explorer, I see that the libraries in react-icons-kit take up lots of space for example: 1.5 mB for ikons, 1 mB for ionicons, 0.7 mB for linea, and so on, summing up to 6 mB.

Is that expected? What can I do to load only the used icons, in order to reduce the bundle size?

Thanks.

[wmira]

How are you importing? Is it something like

import { icon} from 'react-icons-kit/md/icon' ?

On Thu, Nov 22, 2018, 12:13 AM corupta notifications@github.com wrote:

Hi, I'm using one/two icons from feather, typicons, fa, icomoon, md, ikons.

However, doing so results in my bundle.js becoming extremely big, adding it 6 mB

I'm using create-react-app no build, and when I analyze the source with source-map-explorer, I see that the libraries in react-icons-kit take up lots of space for example: 1.5 mB for ikons, 1 mB for ionicons, 0.7 mB for linea, and so on, summing up to 6 mB.

Is that expected? What can I do to load only the used icons, in order to reduce the bundle size?

Thanks.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/wmira/react-icons-kit/issues/37, or mute the thread https://github.com/notifications/unsubscribe-auth/AAcmEEh_yDfwECyvOCkouZKERK4-2w6Wks5uxXuUgaJpZM4YtcSz .

[corupta]

Hi thanks for your fast reply,

First of all, I've accidentally included a test file in source that imported all icons. That was the reason the icon libraries that I wasn't using being included in bundle.

Fixing that test file resulted in react-icons size in my bundle reduce from 6mB to 3 mB.

That way only the icon libraries I'm using are getting imported, however, I was only using 1-2 icons from each but the whole icon libraries are getting included in my source file.

And, you guessed right, thank you a lot. I'm importing the way you said. I've misread your usage in the readme. Thanks for pointing that out.

I modified my code to use as an example import { link } from 'react-icons-kit/ikons/link instead of the way I imported import { link } from 'react-icons-kit/ikons and only imported that way in a test script which I'm using to view & search between all icons.

Thanks a lot for creating such a library.

Btw, would you like me to contribute that test script in which you can search from all icons?

[corupta]

Btw, react-icons-kit in my bundle is reduced to 7.84 kB when I imported icons the way you said