Chapter 27: Dynamic Icon Component

Core Idea

Learn how to use the DynamicIcon component to load icons dynamically by name in your React application, and understand the caveats of using this approach.

Key Concepts

• All icons are imported during build time, which increases build time.
• The bundler will create a separate module for each icon, which can increase the number of network requests.
• You can encounter flashing when loading the icon, since the icon is loaded dynamically.
• When using server-side rendering, you need to make sure that the icon is available during the initial render.

Code Examples

import { DynamicIcon } from 'lucide-react/dynamic';

const App = () => (
  <DynamicIcon name="camera" color="red" size={48} />
);

• What it demonstrates: Dynamic Icon Component usage pattern from the official Lucide docs.

Key Takeaways

1. All icons are imported during build time, which increases build time.
2. The bundler will create a separate module for each icon, which can increase the number of network requests.
3. You can encounter flashing when loading the icon, since the icon is loaded dynamically.
4. When using server-side rendering, you need to make sure that the icon is available during the initial render.

Connects To

• React: part of the React section of the Lucide docs.
• Lucide for React: overview page for this section.