Adds nextjs specific dynamic import map

[zomars]

closes #1725 #1576

What is the purpose of this pull request?

• New Icon
• Bug fix
• New Feature
• Documentation update
• Other:

Description

As specified by the Next.js team we should not use dynamic inside a React component. This uses the recommended approach with a map with dynamic imports.

Before Submitting

• I've read the Contribution Guidelines.
• I've checked if there was an existing PR that solves the same issue.

[zomars]

On further inspection, would it make sense to publish this map as a separate lucide-next package?

[ericfennis]

Hmm, yess, we shouldn't have next as a dependency in lucide-react.
We should move this to a separate package, and maybe the current dynamicImport file should be in there as well.
We could maybe generate all "dynamicImports" when installing the package, It would be nice if we could remove the dynamicImports from the lucide-react itself, currently, it is often used wrong.
We should scope this a bit more for specific use-cases.

[zomars]

Hmm, yess, we shouldn't have next as a dependency in lucide-react. We should move this to a separate package, and maybe the current dynamicImport file should be in there as well. We could maybe generate all "dynamicImports" when installing the package, It would be nice if we could remove the dynamicImports from the lucide-react itself, currently, it is often used wrong. We should scope this a bit more for specific use-cases.

Agreed. Please let me know how I can help in here. RN we have it hard coded in our open source repo but it make sense as you said to have it generated on install.

[github-actions]

This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[vsnthdev]

Not stale, we need this PR because the issue hasn't been solved yet.

[michaelschufi]

Hi @zomars
Thank you for this PR and the link to the hardcoded file!
This is working well so far. But I wonder how you are handling this at the moment. I've seen that in your main branch you have stopped using this dynamic import map. If I may ask - What is your strategy now and what's been your experience regarding performance with lucide-react and Next.js?

[dsbrianwebster]

@michaelschufi been banging my head against the wall wondering why my development server was sooooo slow until I found this of this thread and this one (#1576). Definitely feel like this needs more attention either by way of a fix, or improved documentation on best practices.

Sharing my current workaround for now below...

import { type LucideProps, icons } from 'lucide-react';

type IconComponentName = keyof typeof icons;

interface IconProps extends LucideProps {
  name: string; // because this is coming from the CMS
}

// 👮‍♀️ guard
function isValidIconComponent(componentName: string): componentName is IconComponentName {
  return componentName in icons;
}

export function DynamicIcon({ name, ...props }: IconProps) {
  // we need to convert kebab-case to PascalCase because we formerly relied on
  // lucide-react/dynamicIconImports and the icon names (not the component names) are what are stored in the CMS.
  const kebabToPascal = (str: string) =>
    str
      .split('-')
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join('');

  const componentName = kebabToPascal(name);

  // ensure what is in the CMS is a valid icon component
  if (!isValidIconComponent(componentName)) {
    return null;
  }

  // lucide-react/dynamicIconImports makes makes NextJS development server very slow
  // https://github.com/lucide-icons/lucide/issues/1576
  const Icon = icons[componentName];

  return <Icon {...props} />;
}