# 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
```bash
npm install kruti-icon-library
```
Or using other package managers:
```bash
# 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
```tsx
import React from 'react';
import { IconArrowLeft, IconMagnifyingGlass2, IconSettingsGear1 } from 'kruti-icon-library';
function App() {
return (
);
}
```
### Props Interface
All icons accept the following props:
```tsx
interface IconProps extends React.SVGProps {
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:
```tsx
// Different sizes of the same icon
{/* Small */}
{/* Medium */}
{/* Default */}
{/* Large */}
{/* Extra Large */}
{/* Custom size */}
```
### Styling & Theming
```tsx
// Custom colors
{/* Inherits text color */}
// With CSS classes
// Inline styles
```
### Accessibility
```tsx
// For decorative icons (default)
// For semantic icons
```
### TypeScript Support
```tsx
import { IconProps, IconArrowLeft } from 'kruti-icon-library';
const MyComponent: React.FC = () => {
const iconProps: IconProps = {
size: 20,
color: '#007bff',
title: 'Navigation'
};
return ;
};
```
## 🎨 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
```tsx
import React from 'react';
import {
IconArrowLeft,
IconMagnifyingGlass2,
IconSettingsGear1,
IconSun,
IconMoon
} from 'kruti-icon-library';
function Navigation() {
return (
);
}
```
### Theme Toggle Component
```tsx
import React, { useState } from 'react';
import { IconSun, IconMoon } from 'kruti-icon-library';
function ThemeToggle() {
const [isDark, setIsDark] = useState(false);
return (
);
}
```
### Icon Button Components
```tsx
import React from 'react';
import { IconTrashCan, IconCheckmark2, IconCrossLarge } from 'kruti-icon-library';
function ActionButtons() {
return (
);
}
```
## 🔧 Installation & Build
```bash
# 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:
```tsx
// 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
{/* default */}
```