Lucid React Icons

A reusable React component library for icon picking and rendering, styled with Tailwind CSS, using shadcn/ui and Radix UI. Built with tsup for easy publishing and reuse across projects.

Features

• IconPicker: Search and select icons from a standardized icon set.
• IconRenderer: Render any icon by name.
• Tailwind CSS: Consistent, modern styling.
• shadcn/ui & Radix UI: Accessible, composable UI primitives.
• TypeScript icon data: Standardized icons-data.ts for icon metadata.
• Storybook: Preview and document components (optional).
• Ready for npm publishing

Usage

Install

npm install lucid-react-icons

Import Styles

You need to import the CSS file in your app to get the correct styling:

// In your app's main file (app/layout.tsx, pages/_app.tsx, or main.tsx)
import 'lucid-react-icons/dist/tailwind.css';

Example Usage

import { useState } from 'react';
import { IconPicker, IconRenderer, ColorPicker } from 'lucid-react-icons';
import 'lucid-react-icons/dist/tailwind.css';

export default function App() {
  const [icon, setIcon] = useState({ name: 'activity', color: '#eab308' });
  const [color, setColor] = useState('#eab308');

  return (
    <div style={{ padding: 32 }}>
      <h2>IconPicker</h2>
      <IconPicker 
        value={icon} 
        onSelect={config => setIcon({ name: config.name, color: config.color || '#000000' })} 
        colorPicker 
      />

      <h2>IconRenderer</h2>
      <IconRenderer name={icon.name} />

      <h2>ColorPicker</h2>
      <ColorPicker 
        item="test" 
        data={{ test: color }} 
        onChange={(_, c) => setColor(c)} 
      />
    </div>
  );
}

Use Components

import { IconPicker, IconRenderer } from 'lucid-react-icons';

<IconPicker value={icon} onSelect={setIcon} />
<IconRenderer name="ArrowRight" className="w-6 h-6" />

Icon Data

Edit icons-data.ts to add or update icons. Each icon should have:

• name: Unique string
• component: Icon component name from Radix UI or your set
• categories: Array of categories
• tags: Array of tags

Development

• npm run build – Build the library with tsup
• npm run storybook – Start Storybook for component preview

License

MIT