[Question] Correct way to use imports for Lucide icons

[Aadarsh805]

@shadcn When importing icons the way it's done on this project, we will be importing the complete icons > index.ts file onto our page or component, does this mean that all the icons are being imported each time we are using import as such ->
import { Icons } from "@/components/icons", and can this affect the bundle size and reduce app performance

Would it be better to import like this -> import { ArrowRight, ChevronRight, ChevronLeft } from "@/components/icons", with this we are only importing the icons required on specific pages or components, and not all the icons listed on icons > index.ts which are not required for that file

My question here is does it make a difference while importing in these two ways, if yes which one is better to use and why

https://github.com/shadcn-ui/taxonomy/blob/main/components/icons.tsx

[gavinarori]

When importing icons in a project, especially in a large-scale application, the way you import icons can indeed impact bundle size and app performance.
Importing all icons at once:
import { Icons } from "@/components/icons";
In this approach, you import all icons defined in the icons/index.ts file. This means that all icons will be bundled with your application, regardless of whether they are used or not. This can increase the bundle size, leading to longer initial load times and potentially affecting performance.

Importing specific icons individually:
import { ArrowRight, ChevronRight, ChevronLeft } from "@/components/icons";
In this approach, you only import the specific icons that are needed for a particular page or component. This results in a smaller bundle size because only the necessary icons are included. It can help improve app performance, especially if your application uses a large number of icons.

[gavinarori]

Given these considerations, the second approach is generally better in terms of optimizing bundle size and app performance, especially in larger applications.