How is actually Dynamic Imports working?

[xs-salekin]

If I import icons by name dynamically, then no icons will go with by bundle file. How is the scenario for showing any icons at any time those are not available in bundle?
React App

[karsa-mistmere]

Hi @xs-salekin,

Sorry, I'm not sure I fully understand the question, but I'll try to answer anyway.

Any icon you use will be bundled in some way or another, namingly:

You can use static imports. See: https://lucide.dev/guide/packages/lucide-react#how-to-use
Icons imported statically will be bundled with the component they are used by.

You can also import icons dynamically by name, and use Suspense to lazy load them, see: https://lucide.dev/guide/packages/lucide-react#with-dynamic-imports

These icons will not be bundled with their components, but dynamicIconImports will be, and your bundles will then also include every Lucide icon from your dependency package to allow importing dynamically from, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.

---

But here's a warning: please be aware that in most basic scenarios, dynamic imports are unnecessary and recommended against. Only use these if you have no choice whatsoever but to use them (e.g. you literally need to to be able to access every single Lucide icon in existence, because for example you're building a content management system where users can select any Lucide icon for their content).