lucide/integrations/lucide-react/react-router/app/IconShowcase.tsx

import { Camera, Droplet, Edit2, House, LucideProvider, Pen } from 'lucide-react';
import { DynamicIcon } from 'lucide-react/dynamic';

export default function IconShowcase() {
  return (
    <main aria-label="Lucide integration">
      <Camera data-testid="static-icon" />
      <Droplet
        data-testid="custom-icon"
        className="consumer-icon"
        color="red"
        size={48}
        strokeWidth={4}
        absoluteStrokeWidth
      />
      <LucideProvider
        color="purple"
        size={32}
        strokeWidth={3}
      >
        <House data-testid="provider-icon" />
      </LucideProvider>
      <Pen data-testid="alias-icon" />
      <Edit2 data-testid="canonical-icon" />
      <DynamicIcon
        aria-label="Dynamic circle"
        data-testid="dynamic-icon"
        name="circle"
      />
    </main>
  );
}