Firebird Icon Library

A lightweight, TypeScript-first React icon library with dynamic SVG icon loading. Easily add and use SVG icons in your React applications with full type safety.

Features

• 🎯 TypeScript Support - Full type definitions included
• ⚡ Dynamic Icon Loading - Automatically discovers icons from the icons/ directory
• 🎨 Customizable - Control size, color, and styling with props
• 📦 Tree-shakeable - Only includes icons you use
• 🚀 Zero Runtime - Icons are compiled at build time
• ♿ Accessible - Includes proper ARIA attributes

Installation

npm install firebird-icon-lib
# or
yarn add firebird-icon-lib
# or
pnpm add firebird-icon-lib

Peer Dependencies

This library requires React 16.8.0 or higher:

npm install react react-dom

Usage

Basic Usage

import { Icon } from 'firebird-icon-lib';

function App() {
  return (
    <div>
      <Icon name="add" size={24} />
      <Icon name="delete" size={32} color="#ff0000" />
    </div>
  );
}

With Custom Styling

import { Icon } from 'firebird-icon-lib';

function App() {
  return (
    <Icon
      name="add"
      size={48}
      color="#646cff"
      className="my-custom-icon"
      style={{ margin: '10px' }}
    />
  );
}

Available Icons

The library includes the following icons by default:

• add - Plus/add icon
• delete - Delete/trash icon

API

Icon Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | IconName | required | The name of the icon to display | | size | number \| string | 24 | Size of the icon (in pixels or CSS units) | | color | string | - | Color of the icon (uses currentColor by default) | | className | string | - | Additional CSS class names | | style | React.CSSProperties | - | Inline styles to apply |

TypeScript Types

import type { IconProps, IconName } from 'firebird-icon-lib';

// IconName is a union type of available icon names
const iconName: IconName = 'add'; // ✅
const invalidName: IconName = 'invalid'; // ❌ TypeScript error

Adding Custom Icons

To add your own icons:

1. Place SVG files in the src/icons/ directory
2. The icon name will be automatically derived from the filename
3. For example, src/icons/my-icon.svg becomes name="my-icon"

Note: SVG files should use stroke="currentColor" or fill="currentColor" to support the color prop.

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

# Format code
npm run format

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.