Ability to customize icons; avoid large icon dependency

[baleeds]

Chonky looks really cool!

According to bundlephobia, Chonky is a large package (~500kb), but ~70% comes from the font-awesome dependency.

I confirmed this by adding the library to my project and comparing my bundle size.

See this issue on create-react-app where they discuss almost the exact thing, where tree shaking doesn't occur for dependencies of dependencies in CRA.

An alternative would be to add some way to customize icons, while also switching the defaults to use deep imports, as seen here.

Have you given this any thought before?

[TimboKZ]

PR #6 is now merged, closing this issue.

[TimboKZ]

Reopening this issue for visibility, as this feature is not yet included in v1.x.

[ttamminen]

Hi @baleeds & @TimboKZ !

Do you have plans to implement this optimization to the 1.x branch or have things changed drastically and applying the PR to the 1.x branch has become difficult?

The bundle size is indeed huge. I could do some bundle splitting in the app so that the Chonky would be loaded only in the specific pages, but that's not the most optimal solution.

[TimboKZ]

Hello there, I have plans to address this and also add some new features around icon support.

Applying the existing PR again is not an option, as Chonky was rewritten from scratch between 0.x and 1.x. There are also some conceptual differences between the code in the PR and what I want to implement.

ETA of this feature is about 1 month, likely sooner.

[TimboKZ]

This feature is now supported in the most recent Chonky 2.x alpha release. As shown in 2.x usage docs, Chonky no longer provides a built-in icon component. Instead, user must explicitly provide a pre-built or a custom icon component:

import { setChonkyDefaults } from 'chonky';
import { ChonkyIconFA } from 'chonky-icon-fontawesome';

setChonkyDefaults({ iconComponent: ChonkyIconFA });

I'll add some examples of custom icon components to the 2.x Storybook at a later date.

[ttamminen]

Great, thank you! I'll give it a try next week.