Changed the exemple of dynamic icons using NextJS

[morrisseybr]

This pr resolves the issue #1576.

[dani-z]

Tried this locally, but unfortunately, it crashed my app. Are you sure this works with Next 13+ App router? Here's my error

[morrisseybr]

Tried this locally, but unfortunately, it crashed my app. Are you sure this works with Next 13+ App router? Here's my error

Can you show your implementation and the use of the example that you are doing?

[jguddas]

👍 from me.

IMO we should remove the dynamicIconImports file, it's an antipattern and only leads to performance bottlenecks and flickering.

And hey, you can do this other ways such as described by your change here.

[KajSzy]

Tried this locally, but unfortunately, it crashed my app. Are you sure this works with Next 13+ App router? Here's my error

Can you show your implementation and the use of the example that you are doing?

I think his issue is that dynamicIconImports uses kebab-case icon names, while your apporach requires PascalCase
I've stumbled at exactly the same issue in my project that I very recently moved from non-optimized generic component to the one using dynamicIconImports
But as reported in issue the slowness of dev server brought me here

[bernatfortet]

@KajSzy converting the name to pascal case solved my issue. Dev server is super fast now. Thanks!

[ben519]

@morrisseybr this only works client-side. Any idea how to make it work within a Server Component?

[ericfennis]

We should make separate sections for the App router and pages router.

Pages router should use the docs like it was before.

And create a new section specially targeting the App Router.
With this code example:

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

interface IconProps extends LucideProps {
  name: keyof typeof icons;
}

const Icon = ({ name, ...props }: IconProps) => {
  const LucideIcon = icons[name];

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

export default Icon;

[Jbmanllr]

Hi, so is this the solution for dynamic import with the app router?