HeaderMenu causing import of entire @carbon/icons-react package

What package(s) are you using?

• carbon-components-react
• carbon-components
• @carbon/icons-react

Detailed description

Describe in detail the issue you’re having.

...
import HeaderMenu from "carbon-components-react/lib/components/UIShell/HeaderMenu";
...

causing import of entire @carbon/icons-react package

Is this issue related to a specific component?

Yes. HeaderMenu from UIShell

What version of the Carbon Design System are you using?

"carbon-components": "^10.14.0",
"carbon-components-react": "^7.14.0",
"carbon-icons": "^7.0.7",

Additional information

Also importing of icons like this also causes import of entire package

import { Search20, Notification20, AppSwitcher20 } from "@carbon/icons-react";

So I import icons like this

import Search20 from "@carbon/icons-react/lib/search/20";
import Notification20 from "@carbon/icons-react/lib/notification/20";
import AppSwitcher20 from "@carbon/icons-react/lib/app-switcher/20";

I think that problem because of this line in HeaderMenu component

...

import { ChevronDown16 } from '@carbon/icons-react';

...

I am using Laravel Mix

const mix = require("laravel-mix");
const path = require("path");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");

mix
  .react("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css")
  .options({
    postCss: [autoprefixer(), cssnano()]
  })
  .webpackConfig({
    output: { chunkFilename: "js/[name].js?id=[chunkhash]" },
    resolve: {
      alias: {
        "@": path.resolve("resources/js")
      }
    }
  })
  .version()
  .sourceMaps();

• Screenshots or code

[paul-sachs]

I’ve run into a similar issue and I don’t think it’s specific to carbon-icons. I’ve reproduced the issue with it with another package called react-use. I suspect it’s a webpack optimization issue that create-react-app may have solved somewhere deep in it’s config. It may be specific to being a node_modules dependency of an async chunk not included directly in an entry point (included via async import()). Just a theory though. I’ve tried adding an import to carbon/icons-react to the main entry point and it doesn’t have this issue.

[GraxMonzo]

I think @carbon/icons-react is not tree-shakable