Description
openedon Sep 19, 2024
For backwards compatibility, @storybook/icon
is imported as *
in two places:
-
The
Icons
component in@storybook/core/components
: https://github.com/storybookjs/storybook/blob/next/code/core/src/components/components/icon/icon.tsx/#L35-L62 this component is deprecated, and the new icons are supposed to be used and imported individually by users/addon authors -
The globalisation in
@storybook/core/manager/globals: https://github.com/storybookjs/storybook/blob/next/code/core/src/manager/globals/runtime.ts/#L25 Which makes all of
@storybook/iconsglobally available in the manager bundle. This ensures that
@storybook/icons` is only bundled in once in the manager, but ideally this shouldn't be necessary at all, if icons where imported individually instead.
Currently the components
and manager
entrypoints of @storybook/core
both have all 190kb of @storybook/icons
bundled in, which is significant given that icons could instead be imported individually, some being <1kb in size.
components
: https://635781f3500dd2c49e189caf-rjflqvpgls.chromatic.com/?path=/story/bench--es-build-analyzer&args=metafile:core_SLASH_components_DOT_esm_DOT_jsonmanager
: https://635781f3500dd2c49e189caf-rjflqvpgls.chromatic.com/?path=/story/bench--es-build-analyzer&args=metafile:core_SLASH_manager_DOT_esm_DOT_json
In Storybook 9.0 we should remove these wildcard imports so only the used icons are bundled in.