Leap Icons

A modular React icon library built from SVG files with multiple weight variants. Built for React 18 with full TypeScript support.

Features

• 🎨 6 Icon Variants: Bold, Regular, Light, Thin, Fill, and Duotone
• 📦 Modular Imports: Import only the icons you need
• 🎯 TypeScript Support: Full TypeScript definitions included
• ⚡ Tree Shaking: Optimized for bundle size
• 🎨 Customizable: Size, color, and styling props
• 📱 Responsive: Scalable SVG icons
• 🔄 React 18 Ready: Uses forwardRef for better performance
• 🚀 Modern JSX: Uses the new JSX transform

Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher

Installation

npm install leap-icons

Usage

Basic Usage

import { AcornBold } from 'leap-icons/bold/acorn';
import { UserRegular } from 'leap-icons/regular/user';

function App() {
  return (
    <div>
      <AcornBold size={24} color="#007bff" />
      <UserRegular size={32} color="currentColor" />
    </div>
  );
}

With Refs (React 18)

import { useRef } from 'react';
import { HeartBold } from 'leap-icons/bold/heart';

function IconWithRef() {
  const iconRef = useRef(null);
  
  return (
    <HeartBold 
      ref={iconRef}
      size={24} 
      color="red"
      onClick={() => console.log('Icon clicked!')}
    />
  );
}

Available Variants

• Bold: leap-icons/bold/[icon-name]
• Regular: leap-icons/regular/[icon-name]
• Light: leap-icons/light/[icon-name]
• Thin: leap-icons/thin/[icon-name]
• Fill: leap-icons/fill/[icon-name]
• Duotone: leap-icons/duotone/[icon-name]

Icon Props

All icons accept the following props:

interface IconProps {
  size?: number | string;        // Default: 24
  color?: string;                // Default: 'currentColor'
  className?: string;            // Additional CSS classes
  style?: React.CSSProperties;   // Additional inline styles
}

All icons are forwardRef components, so they also accept a ref prop.

Examples

import React, { useRef } from 'react';
import { 
  HeartBold, 
  StarRegular, 
  CheckLight,
  ArrowRightThin,
  HomeFill,
  SettingsDuotone 
} from 'leap-icons';

function IconExamples() {
  const heartRef = useRef(null);
  
  return (
    <div>
      {/* Basic usage */}
      <HeartBold ref={heartRef} />
      
      {/* Custom size */}
      <StarRegular size={48} />
      
      {/* Custom color */}
      <CheckLight color="#28a745" />
      
      {/* Custom styling */}
      <ArrowRightThin 
        size={32}
        color="#dc3545"
        className="my-custom-class"
        style={{ marginRight: '8px' }}
      />
      
      {/* Fill variant */}
      <HomeFill size={24} color="#6f42c1" />
      
      {/* Duotone variant */}
      <SettingsDuotone size={28} color="#fd7e14" />
      
      {/* With event handlers */}
      <HeartBold 
        onClick={() => alert('Heart clicked!')}
        onMouseEnter={() => console.log('Mouse entered')}
      />
    </div>
  );
}

Import Patterns

Individual Icons (Recommended)

import { AcornBold } from 'leap-icons/bold/acorn';
import { UserRegular } from 'leap-icons/regular/user';

Multiple Icons from Same Variant

import { AcornBold, HeartBold, StarBold } from 'leap-icons/bold';

All Icons (Not recommended for production)

import { AcornBold, UserRegular, HeartLight } from 'leap-icons';

Available Icons

The library includes over 1500 icons across all variants. Here are some popular ones:

Navigation & UI

• arrow-left, arrow-right, arrow-up, arrow-down
• chevron-left, chevron-right, chevron-up, chevron-down
• menu, close, search, filter
• home, settings, user, heart

Actions & Status

• check, plus, minus, edit
• delete, download, upload, share
• play, pause, stop, volume

Communication

• mail, phone, message, notification
• calendar, clock, location

Social & Media

• facebook, twitter, instagram, linkedin
• youtube, github, discord

Development

Building the Library

# Install dependencies
npm install

# Build the library
npm run build

# Clean build artifacts
npm run clean

Publishing

The library includes automated publishing scripts:

# Bump version (patch, minor, or major)
npm run version:patch    # 0.0.1 -> 0.0.2
npm run version:minor    # 0.0.1 -> 0.1.0
npm run version:major    # 0.0.1 -> 1.0.0

# Publish to npm
npm run publish

The publish script will:

1. Build the library
2. Create a clean package.json for the dist folder
3. Copy necessary files to dist
4. Check if the version is already published
5. Publish to npm from the dist directory

Project Structure

leap-icons/
├── data/                    # Source SVG files
│   ├── bold/               # Bold variant icons
│   ├── regular/            # Regular variant icons
│   ├── light/              # Light variant icons
│   ├── thin/               # Thin variant icons
│   ├── fill/               # Fill variant icons
│   └── duotone/            # Duotone variant icons
├── dist/                   # Built library
│   ├── bold/               # Built bold icons
│   │   └── [icon-name]/    # Individual icon folders
│   │       ├── index.js    # CommonJS build
│   │       ├── index.esm.js # ESM build
│   │       └── index.d.ts  # TypeScript definitions
│   ├── regular/            # Built regular icons
│   ├── light/              # Built light icons
│   ├── thin/               # Built thin icons
│   ├── fill/               # Built fill icons
│   ├── duotone/            # Built duotone icons
│   └── index.ts            # Main export file
├── scripts/
│   ├── build.js            # Build script
│   ├── publish.js          # Publish script
│   └── version.js          # Version bump script
├── package.json
├── tsconfig.json
├── rollup.config.js
└── README.md

Contributing

1. Add new SVG files to the appropriate variant folder in data/
2. Run npm run build to generate the React components
3. Test your changes
4. Submit a pull request

License

MIT License - see LICENSE file for details.