Is there a command line a utility to add only required icons in specified folder?

[Naveen0903]

I was going through the code of store front. In here, I found that icons package has only required icons with only size props value varying.

Is there a command line utility to pull only specific icons? Or Was this manually added from medusa icons package?

[thisisgreathill]

Hey Naveen, that's a great observation and an excellent question!

The short answer is: No, there isn't a special command-line utility to pull only specific icons. This is handled automatically during the build process by a technique called "Tree Shaking".

How it Works

Modern JavaScript bundlers, like Vite or Webpack (which are used in Medusa's storefront), are smart enough to detect which code is actually being used.

1. ESM Imports: When you import an icon in your code, you do it like this:

   import { ShoppingBag } from "@medusajs/icons"

2. Static Analysis: During the production build (e.g., when you run npm run build), the bundler analyzes your code. It sees that you've only imported and used the ShoppingBag icon from the entire @medusajs/icons package.
3. Dead Code Elimination: The bundler then "shakes the tree" and lets all the unused icons (the "dead code") fall off. Only the code for the ShoppingBag icon is included in the final, optimized production bundle.

This is why it appears as if only the required icons are in the package—because, in the final output, they are!

Regarding the size props:

The icons themselves are React components. They accept props like size or color. When you use <ShoppingBag size="24" /> and <ShoppingBag size="32" />, you are rendering the same icon component twice with different props, which in turn apply different width and height attributes to the underlying SVG. You are not including two different icon files.

So, to summarize: It's not a manual process or a separate tool, but a powerful, automatic feature of the modern JavaScript ecosystem that Medusa's storefront leverages to stay lean and optimized.

Hope this helps clarify things!

[Naveen0903]

Hi @thisisgreathill , My question is not about the bundler.
We have medusa sample store front source code in this repo.
In the same repo there are icons in one of the module. As you can see there are only few required icons that are present. @medusajs/icons package is never used.

So i am guessing either there is a utility tool to pull only required icons (Like pulling shadcn components) or it might have been manually created.