luIcon

Smart, customizable, developer-first icon system for React 18+ applications.

Features

• Tree-shakeable - Import only the icons you need
• Smart Icons - Dynamic icons with props (battery, wifi, volume, signal)
• Animation Support - Built-in spin, pulse, ring, and bounce animations
• Theme Support - Automatic dark/light mode detection
• TypeScript - Full type definitions included
• Tailwind-friendly - Works seamlessly with Tailwind CSS

Installation

npm i @lui-craft/luicon@latest

Usage

Basic Usage

import { LuHome, LuSearch, LuHeart } from '@lui-craft/luicon';

function App() {
  return (
    <div>
      <LuHome size={24} />
      <LuSearch size={20} color="#6366f1" />
      <LuHeart />
    </div>
  );
}

Smart Icons

Smart icons accept dynamic props for real-time state:

import { LuBattery, LuWifi, LuVolume, LuSignal } from '@lui-craft/luicon';

function StatusBar() {
  return (
    <div>
      <LuBattery level={80} />
      <LuWifi strength={3} />
      <LuVolume volume={2} />
      <LuSignal signal={4} />
    </div>
  );
}

Animations

Add built-in animations:

import { LuRefresh, LuBell, LuLoader } from '@lui-craft/luicon';

function LoadingExample() {
  return (
    <div>
      <LuRefresh animate="spin" />
      <LuBell animate="pulse" />
      <LuLoader animate="ring" />
    </div>
  );
}

With LuIconProvider

import { LuIconProvider } from '@lui-craft/luicon';

function App() {
  return (
    <LuIconProvider
      config={{
        strokeWidth: 1.5,
        defaultVariant: 'outline',
        theme: 'auto',
      }}
    >
      <YourApp />
    </LuIconProvider>
  );
}

Custom Props

All icons accept these props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | string | 24 | Icon size | | color | string | currentColor | Icon color | | strokeWidth | number | 2 | Stroke width | | className | string | - | Additional CSS classes | | animate | 'spin' | 'pulse' | 'ring' | 'bounce' | - | Animation type | | variant | 'outline' | 'filled' | 'duotone' | outline | Icon variant |

Available Icons

Navigation

• LuHome, LuMenu, LuChevronLeft, LuChevronRight, LuArrowLeft

Actions

• LuSearch, LuPlus, LuX, LuCheck, LuTrash

Communication

• LuMail, LuBell, LuPhone, LuMessage

User

• LuUser, LuUsers, LuUserPlus

Media

• LuImage, LuPlay, LuPause

Smart Icons

• LuBattery (level prop), LuWifi (strength prop), LuVolume (volume prop), LuSignal (signal prop)

UI Elements

• LuSettings, LuHeart, LuStar, LuEye, LuEyeOff

Files

• LuFolder

Data & Analytics

• LuBarChart, LuPieChart, LuTrendingUp, LuTrendingDown, LuActivity

Editor & Formatting

• LuType, LuBold, LuItalic, LuAlignLeft, LuAlignCenter

E-commerce & Finance

• LuShoppingCart, LuCreditCard, LuTag, LuWallet, LuReceipt

Layout & Display

• LuLayout, LuGrid, LuList, LuMaximize, LuMinimize

Cloud & Infrastructure

• LuCloud, LuDatabase, LuServer, LuHardDrive, LuDownload

UI Essentials

• LuCalendar, LuClock, LuMap, LuCamera, LuLock

Tree-shaking

Import icons individually for optimal tree-shaking:

// ✅ Good - only imports LuHome
import { LuHome } from '@lui-craft/luicon';

// ❌ Bad - imports all icons
import * as Icons from '@lui-craft/luicon';

License

MIT License - see LICENSE for details.