Lucide-React icons - v0 by Vercel

100 icons from lucide-react

snippet.txt

I'll create a React component that showcases a selection of these Lucide icons in a grid layout. This will demonstrate how to import and use the icons from the lucide-react library.

To use this component, you would simply import and render it in your application:

import IconShowcase from './icon-showcase'

function App() {
  return (
    <div>
      <IconShowcase />
    </div>
  )
}

This will display a grid of 10 Lucide icons with their names. You can easily expand this to include more icons or create a more complex layout as needed.

that's not 100

I apologize for the misunderstanding. You're absolutely right, and I appreciate you pointing that out. Let's create a showcase with all 100 icons from the list you provided. I'll modify the component to display all 100 icons in a grid layout.

This updated version of the IconShowcase component now displays all 100 icons from the list you provided. Here's what changed:

Instead of importing individual icons, we now import all icons from 'lucide-react' using import * as LucideIcons.
We've created an array of 100 icon names based on the list you provided.
The grid layout has been adjusted to be more responsive, showing 2 columns on small screens, 3 on medium, 5 on large, and 10 on extra-large screens.
In the mapping function, we dynamically access the icon component using LucideIcons[iconName as keyof typeof LucideIcons]. This allows us to render any icon by its name.
The text size for icon names has been reduced to accommodate longer names in the cards.

This component will now showcase all 100 Lucide icons in a responsive grid layout. Users can easily see and identify each icon along with its name.

To use this component, you would import and render it in your application just like before:

import IconShowcase from './icon-showcase'

function App() {
  return (
    <div>
      <IconShowcase />
    </div>
  )
}

This will display a grid of all 100 Lucide icons with their names, providing a comprehensive showcase of the available icons from the lucide-react library.

icon-showcase.tsx