Kruti Icon Library

A clean, modern React icon library with TypeScript support, featuring carefully crafted SVG icons. Control icon sizes easily through props instead of separate components.

📦 Installation

npm install kruti-icon-library

Or using other package managers:

# Yarn
yarn add kruti-icon-library

# pnpm
pnpm add kruti-icon-library

📋 Requirements

• React: >=16.8.0
• React DOM: >=16.8.0
• TypeScript: Optional but recommended for better development experience

🚀 Usage

Basic Usage

import React from 'react';
import { IconArrowLeft, IconMagnifyingGlass2, IconSettingsGear1 } from 'kruti-icon-library';

function App() {
  return (
    <div>
      <IconArrowLeft size={24} />
      <IconMagnifyingGlass2 size={20} color="#007bff" />
      <IconSettingsGear1 size={16} title="Settings" />
    </div>
  );
}

Props Interface

All icons accept the following props:

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;     // Default: 24
  color?: string;             // Default: "currentColor"
  ariaHidden?: boolean;       // Default: true
  title?: string;             // For accessibility
}

Size Control

Control icon sizes easily with the size prop - no need for separate components:

// Different sizes of the same icon
<IconArrowLeft size={16} />   {/* Small */}
<IconArrowLeft size={20} />   {/* Medium */}
<IconArrowLeft size={24} />   {/* Default */}
<IconArrowLeft size={32} />   {/* Large */}
<IconArrowLeft size={48} />   {/* Extra Large */}
<IconArrowLeft size="2rem" /> {/* Custom size */}

Styling & Theming

// Custom colors
<IconArrowLeft color="#ff6b6b" />
<IconArrowLeft color="rgb(59, 130, 246)" />
<IconArrowLeft color="currentColor" /> {/* Inherits text color */}

// With CSS classes
<IconArrowLeft className="my-icon-class" />

// Inline styles
<IconArrowLeft style={{ color: '#10b981', marginRight: '8px' }} />

Accessibility

// For decorative icons (default)
<IconArrowLeft ariaHidden={true} />

// For semantic icons
<IconArrowLeft ariaHidden={false} title="Go back" />

TypeScript Support

import { IconProps, IconArrowLeft } from 'kruti-icon-library';

const MyComponent: React.FC = () => {
  const iconProps: IconProps = {
    size: 20,
    color: '#007bff',
    title: 'Navigation'
  };

  return <IconArrowLeft {...iconProps} />;
};

🎨 Available Icons

All icons are available as React components. Simply prefix the icon name with "Icon" and use PascalCase:

| Icon | Component | Aliases | |------|-----------|---------| | | IconArrowBoxLeft | logout, leave, door | | | IconArrowDown | | | | IconArrowInbox | download, file, down | | | IconArrowLeft | | | | IconArrowOutOfBox | upload, share | | | IconArrowRotateCounterClockwise | rotate-left | | | IconArrowUndoDown | back, bottom | | | IconArrowUp | arrow-top | | | IconArrowsRepeatCircle | repost | | | IconAsterisk | placeholder | | | IconAtom | | | | IconBubbles | messages, chat, communicate | | | IconLayoutGrid2 | grid | | | IconLayoutLeft | grid, window | | | IconMagicEdit | magic-writing | | | IconMagnifyingGlass2 | search | | | IconMapPin | location | | | IconMicrophone | mic, sound, podcast | | | IconMinusLarge | remove, delete | | | IconMoon | dark-mode, night | | | IconPaperclip1 | attachment | | | IconPencil | edit, write | | | IconPencil1 | edit, write-1 | | | IconPeople2 | | | | IconPhone | iphone, mobile | | | IconPlusLarge | add large | | | IconReceiptBill | purchase, invoice | | | IconRobot | | | | IconSearchMenu | list-search | | | IconSettingsGear1 | preferences | | | IconShieldCheck3 | check | | | IconThunder | zap, flash | | | IconMoon | dark-mode, night | | | IconSun | light-mode, day, today | | | IconThumbsDown | thumb, hand, no, contra | | | IconThumbsDown1 | thumb, hand, no, contra-1 | | | IconThumbsUp | thumb, hand, yes, pro | | | IconThumbsUp1 | thumb, hand, yes, pro-1 | | | IconThumbsDown | thumb, hand, no, contra |

📖 Complete Usage Examples

Basic Implementation

import React from 'react';
import {
  IconArrowLeft,
  IconMagnifyingGlass2,
  IconSettingsGear1,
  IconSun,
  IconMoon
} from 'kruti-icon-library';

function Navigation() {
  return (
    <nav className="flex items-center space-x-4">
      <button className="p-2">
        <IconArrowLeft size={20} />
      </button>
      
      <div className="relative">
        <IconMagnifyingGlass2 
          size={18} 
          className="absolute left-3 top-1/2 transform -translate-y-1/2" 
        />
        <input 
          className="pl-10 pr-4 py-2 border rounded"
          placeholder="Search..." 
        />
      </div>
      
      <button className="p-2">
        <IconSettingsGear1 size={20} />
      </button>
    </nav>
  );
}

Theme Toggle Component

import React, { useState } from 'react';
import { IconSun, IconMoon } from 'kruti-icon-library';

function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  return (
    <button 
      onClick={() => setIsDark(!isDark)}
      className="p-2 rounded-full hover:bg-gray-100"
    >
      {isDark ? (
        <IconSun size={24} color="#fbbf24" title="Switch to light mode" />
      ) : (
        <IconMoon size={24} color="#6366f1" title="Switch to dark mode" />
      )}
    </button>
  );
}

Icon Button Components

import React from 'react';
import { IconTrashCan, IconCheckmark2, IconCrossLarge } from 'kruti-icon-library';

function ActionButtons() {
  return (
    <div className="flex space-x-2">
      <button className="flex items-center px-3 py-2 bg-green-500 text-white rounded">
        <IconCheckmark2 size={16} className="mr-2" />
        Confirm
      </button>
      
      <button className="flex items-center px-3 py-2 bg-red-500 text-white rounded">
        <IconTrashCan size={16} className="mr-2" />
        Delete
      </button>
      
      <button className="p-2 bg-gray-300 rounded">
        <IconCrossLarge size={16} />
      </button>
    </div>
  );
}

🔧 Installation & Build

# Install dependencies
npm install

# Generate icon components from SVGs
npm run generate-icons

# Build the library
npm run build

# Development (watch mode)
npm run dev

📄 License

OLA

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Add your SVG icons to the appropriate size folder (src/icons/24/)
4. Run npm run generate-icons to create React components
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

🆕 What's New in v1.1.0

• ✅ Simplified Architecture: Removed size-specific components (16px, 20px variants)
• ✅ Prop-based Sizing: Control icon sizes easily with the size prop
• ✅ 61 Clean Components: One component per icon, no size suffix clutter
• ✅ Better Performance: Smaller bundle size with fewer component variants
• ✅ Enhanced Developer Experience: Cleaner imports and easier size control

Migration from v1.0.x

If you were using size-specific components:

// Before (v1.0.x)
import { IconArrowLeft16, IconArrowLeft20, IconArrowLeft } from 'kruti-icon-library';

// After (v1.1.0)
import { IconArrowLeft } from 'kruti-icon-library';

// Use the size prop instead
<IconArrowLeft size={16} />
<IconArrowLeft size={20} />
<IconArrowLeft size={24} /> {/* default */}