@grupor5/raya-icons

Icon library for Raya Design System - Optimized for tree-shaking and performance.

🚀 Installation

npm install @grupor5/raya-icons
# or
yarn add @grupor5/raya-icons
# or
pnpm add @grupor5/raya-icons

📖 Usage

Recommended: Individual Imports (Best Tree-Shaking)

import { AddIcon } from '@grupor5/raya-icons/icons/AddIcon';
import { EditIcon } from '@grupor5/raya-icons/icons/EditIcon';

function MyComponent() {
  return (
    <div>
      <AddIcon size={24} color="blue" />
      <EditIcon size={20} />
    </div>
  );
}

Barrel Imports (Common Icons Only)

import { AddIcon, EditIcon, CheckIcon } from '@grupor5/raya-icons';

function MyComponent() {
  return (
    <div>
      <AddIcon size={24} />
      <EditIcon size={20} />
      <CheckIcon size={16} />
    </div>
  );
}

🎨 Icon Props

All icons accept the following props:

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
  color?: string;
}

Examples

// Size variations
<AddIcon size={16} />
<AddIcon size={24} />
<AddIcon size="2rem" />

// Color variations
<AddIcon color="red" />
<AddIcon color="#3B82F6" />
<AddIcon color="currentColor" /> // default

// Additional SVG props
<AddIcon 
  size={24} 
  color="blue"
  className="my-icon"
  onClick={() => console.log('clicked')}
/>

📦 Bundle Size Optimization

This package is optimized for tree-shaking:

• Individual imports: Only the icons you use are bundled
• Selective barrel exports: Common icons available via main export
• No side effects: Marked as "sideEffects": false

Bundle Size Comparison

// ❌ Imports all icons (~850KB)
import * from '@grupor5/raya-icons';

// ✅ Imports only AddIcon (~2KB)
import { AddIcon } from '@grupor5/raya-icons/icons/AddIcon';

// ✅ Imports only common icons (~20KB)
import { AddIcon, EditIcon } from '@grupor5/raya-icons';

📂 Available Icons

This package includes 470+ icons organized by categories:

• Archive: ArchiveIcon, SaveIcon, BookmarkIcon...
• Arrows: ArrowUpIcon, ArrowDownIcon, ChevronLeftIcon...
• Business: ActivityIcon, ChartIcon, GraphIcon...
• Content: EditIcon, CopyIcon, DocumentIcon...
• Navigation: MenuIcon, HomeIcon, BackIcon...
• Status: CheckIcon, ErrorIcon, WarningIcon...
• Users: UserIcon, ProfileIcon, PeopleIcon...
• And many more...

Finding Icons

You can explore all available icons by:

1. Browse the source: Check /src/icons/ directory
2. Use TypeScript: Auto-completion will show available icons
3. Check Storybook: [Coming Soon] Visual icon browser

🔧 Development

Scripts

# Build the package
npm run build

# Watch mode for development
npm run dev

# Generate new icon components
npm run generate:icons

# Optimize SVG files
npm run optimize:icons

Adding New Icons

1. Add SVG files to the appropriate category in /src/original/
2. Run npm run generate:icons to create React components
3. Update exports in /src/index.ts if needed
4. Build and test

🤝 Related Packages

• @grupor5/raya - Main design system components

📄 License

MIT License - see LICENSE file for details.