elrond-icons

A comprehensive SVG icon library with 1,173+ optimized icons across 15+ categories, built for modern web applications.

✨ Features

• 1,173+ Icons: Comprehensive collection covering all major use cases
• Multiple Formats: React components, raw SVG, and TypeScript declarations
• Optimized: All icons are optimized with SVGO for minimal bundle size
• Tree-shakable: Import only the icons you need
• TypeScript: Full TypeScript support with type definitions
• Multiple Builds: ESM, CommonJS, and UMD formats
• Accessible: Built with accessibility in mind (ARIA support)

📦 Installation

npm install elrond-icons

🚀 Quick Start

React Components

import { Activity, AlertCircle, Heart } from 'elrond-icons';

function MyComponent() {
  return (
    <div>
      <Activity size={24} color="blue" />
      <AlertCircle size={32} color="red" />
      <Heart size={20} color="pink" />
    </div>
  );
}

Raw SVG

import { ActivitySvg, AlertCircleSvg } from 'elrond-icons/svg';

function MyComponent() {
  return (
    <div>
      <img src={ActivitySvg} alt="Activity" />
      <img src={AlertCircleSvg} alt="Alert" />
    </div>
  );
}

📚 Usage

React Components

All React components accept the following props:

interface IconProps {
  size?: number | string;        // Icon size (default: 24)
  color?: string;                // Icon color (default: 'currentColor')
  className?: string;            // CSS class name
  style?: Record<string, any>;   // Inline styles
  'aria-label'?: string;        // Accessibility label
  'aria-hidden'?: boolean;      // Hide from screen readers
}

Available Icons

The library includes icons from these categories:

• General: Common UI elements and actions
• Layout: Grid, alignment, and layout tools
• Development: Code, terminal, and developer tools
• Communication: Messages, notifications, and chat
• Media: Images, video, and audio controls
• Navigation: Arrows, menus, and navigation elements
• Business: Charts, analytics, and business tools
• Security: Locks, shields, and security features
• Weather: Weather conditions and forecasts
• Transportation: Vehicles and travel icons
• Healthcare: Medical and health-related icons
• Education: Learning and academic icons
• Finance: Money, banking, and financial icons
• Technology: Devices, hardware, and tech icons
• Social: Social media and community icons

Icon Categories

Icons are organized by category for easy discovery:

// General icons
import { Home, User, Settings, Search } from 'elrond-icons';

// Layout icons
import { Grid, AlignLeft, AlignCenter, AlignRight } from 'elrond-icons';

// Development icons
import { Code, Terminal, GitBranch, Database } from 'elrond-icons';

// Communication icons
import { MessageCircle, Bell, Mail, Phone } from 'elrond-icons';

🎨 Styling

CSS Custom Properties

Icons use currentColor by default, making them easy to style:

.my-icon {
  color: #3b82f6; /* Blue */
  font-size: 24px;
}

.my-icon:hover {
  color: #1d4ed8; /* Darker blue */
}

Size Control

// Different sizes
<Activity size={16} />  // Small
<Activity size={24} />  // Medium (default)
<Activity size={32} />  // Large
<Activity size="2rem" /> // Custom unit

Custom Styling

<Activity 
  size={32}
  color="#ff6b6b"
  className="my-custom-class"
  style={{ 
    filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
    transition: 'transform 0.2s ease'
  }}
/>

🔧 Advanced Usage

Icon Registry

Access the icon registry for programmatic icon management:

import { iconRegistry } from 'elrond-icons';

// Get all icons
const allIcons = iconRegistry.getAll();

// Get icons by category
const layoutIcons = iconRegistry.getByCategory('layout');

// Search icons
const searchResults = iconRegistry.search('arrow');

Utility Functions

import { 
  generateIconName, 
  generateCategoryName, 
  extractTags 
} from 'elrond-icons';

// Convert file names to icon names
const iconName = generateIconName('arrow-right.svg'); // 'ArrowRight'

// Generate category names
const categoryName = generateCategoryName('layout-round-icons'); // 'Layout'

// Extract tags from icon names
const tags = extractTags('arrow-right-up'); // ['arrow', 'right', 'up']

📊 Bundle Size

The library is optimized for minimal bundle impact:

• Individual icons: ~1-2KB each
• Tree-shaking: Only import what you use
• Optimized SVGs: Compressed with SVGO
• No dependencies: Zero runtime dependencies

Bundle Analysis

# Analyze your bundle
npm install --save-dev webpack-bundle-analyzer
npx webpack-bundle-analyzer dist/static/js/*.js

🧪 Testing

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

🛠️ Development

Building

# Install dependencies
npm install

# Process and optimize icons
npm run process-icons

# Generate React components
npm run generate-components

# Build all formats
npm run bundle

# Build and test
npm run build

📝 Publish

# Small fix
npm version patch (for 1.0.7 → 1.0.8)

# Small feature
npm version minor (for 1.0.7 → 1.1.0)

# Big Release
npm version major (for 1.0.7 → 2.0.0)

# Publish the package
npm publish

Project Structure

src/
├── components/          # Generated React components
│   ├── react/          # React components
│   ├── types/          # TypeScript declarations
│   └── svg/            # Raw SVG exports
├── icons/              # Source SVG files
│   ├── optimized/      # Optimized SVG files
│   └── [categories]/   # Icon categories
├── processors/         # Build processors
├── types/              # TypeScript types
└── utils/              # Utility functions

📄 License

ISC License - see LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📞 Support

• Issues: GitHub Issues
• Documentation: GitHub Wiki
• Discussions: GitHub Discussions

🎯 Roadmap

• [ ] Icon font generation
• [ ] Vue.js components
• [ ] Angular components
• [ ] Svelte components
• [ ] Icon search and filtering
• [ ] Custom icon upload
• [ ] Icon animation utilities
• [ ] Dark mode variants

Made with ❤️ by the Elrond team