Using Next.js dynamic import to create a generic icons component can effectively reduce client-side component re-rendering issues.

[HOJOON07]

Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• all JS packages
• site

Description

In the sidebar and navigation bar components, I was importing each icon component and using icons via the name attribute. However, every time an icon was clicked or an event occurred, all the icon components exhibited a flickering issue.

Use cases

I was able to resolve it by adding React.memo.

import dynamic from 'next/dynamic';
import { memo } from 'react';
import { LucideProps } from 'lucide-react';
import dynamicIconImports from 'lucide-react/dynamicIconImports';

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

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

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

export default Icon;

Checklist

• I have searched the existing issues to make sure this bug has not already been reported.