Package

• lucide
• lucide-react

Version

0.279.0

Browser

• Other/not relevant

Operating system

• Other/not relevant

Description

I'm attempting to utilize the dynamicIconImports object to create a unified component for rendering icons based on an icon name prop in NextJS 13 with the app router. I followed the example provided in the documentation, but it significantly slows down my development server. The time it takes for the initial compilation has increased from ~8 seconds to ~22 seconds, and the time for hot reloading even minor changes (such as a simple text modification) has gone from ~800ms to ~12 seconds.

I've tried changing the component from server-side to client-side rendering. I've also attempted to add the library to the transpilePackages list in the next.config.js file. I even experimented with using the dynamicIconImports object with a fixed name (ignoring the name prop), but none of these approaches seemed to help.

My solution to the problem was to rewrite the use of the next/dynamic function for importing the 'lucide-react' module and utilize the promise result to obtain the necessary icon. This restored the development server to its normal performance.

I believe that the way the dynamicIconImports feature is implemented causes the NextJS development server to read and process all the imports when it shouldn't be doing so during compilation.

I am planning to submit a pull request to enhance the consumption of Lucide.icons by introducing a simple IconsName type. Additionally, I will revise the example of dynamic usage within the NextJS environment to eliminate the use of the dynamicIconImports object.

Would anyone like to contribute to this issue I'm addressing? Your contributions would be greatly appreciated. Thank you!

Steps to reproduce

1. Begin a NextJS 13 project following the instructions in the documentation (using the latest version - 13.5.3).
2. Develop an Icon component as outlined in the lucide-react documentation, employing the 'dynamic' feature from NextJS and 'dynamicIconImports' from lucide-react.
3. Import this component into a page and take note of the increased compilation time.

Checklist

• I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)