🚀 BERTUI Icons

The world's fastest icon library. Powered by Zig + Bun FFI.

Lucide-compatible API with revolutionary text overlay support and unlimited imports without bundle bloat.

Features

• ⚡ Zig-Transpiled Performance: Icons pre-compiled to optimized Zig code
• 🎨 Text Overlays: Add dynamic text/numbers inside any icon
• 📦 Zero Bundle Bloat: Import unlimited icons without size worries
• 🔄 Lucide Compatible: Drop-in replacement for lucide-react
• 🎯 Type-Safe: Full TypeScript support
• 🔥 Bun FFI: Lightning-fast runtime rendering

Installation

bun add bertui-icons

Usage

Basic Usage (Lucide-Compatible)

import { ArrowRight, Home, Heart } from 'bertui-icons';

function App() {
  return (
    <div>
      <ArrowRight />
      <Home size={32} color="blue" />
    </div>
  );
}

Text Overlays (Revolutionary!)

import { ArrowRight, Home, Bell } from 'bertui-icons';

function App() {
  return (
    <div>
      {/* Number badge */}
      <Bell>5</Bell>
      
      {/* Text label */}
      <ArrowRight>Next</ArrowRight>
      
      {/* Custom positioning */}
      <Home x={30} y={15} fontSize={14}>Home</Home>
    </div>
  );
}

Unlimited Imports

// Import everything without worrying about bundle size!
import * as Icons from 'bertui-icons';

function IconGallery() {
  return Object.keys(Icons).map(name => {
    const Icon = Icons[name];
    return <Icon key={name} />;
  });
}

Dynamic Icons

import { Icon } from 'bertui-icons';

function DynamicIcon({ iconName, label }) {
  return <Icon name={iconName}>{label}</Icon>;
}

API

Icon Props

interface IconProps {
  size?: number;              // Default: 24
  color?: string;             // Default: 'currentColor'
  strokeWidth?: number;       // Default: 2
  className?: string;         // CSS class
  children?: string | number; // Text overlay
  x?: number;                 // Text X position (default: beside icon)
  y?: number;                 // Text Y position (default: centered)
  fontSize?: number;          // Text size (default: 12)
}

All Available Icons

Based on Lucide icon set. See Lucide Icons for complete list.

How It Works

1. Build Time: Lucide SVGs → Zig-transpiled code via build-icons.js
2. Distribution: Users get pre-optimized Zig binaries (no raw SVGs)
3. Runtime: Bun FFI calls Zig for ultra-fast rendering
4. Result: Blazing performance + innovative features

Development

# Install dependencies
bun install

# Build icons from /icons folder
bun run build:icons

# Compile Zig library
bun run build:zig

# Full build
bun run build

# Test
bun test

Project Structure

bertui-icons/
├── icons/              # Source Lucide SVGs
├── icon_renderer.zig   # Core Zig renderer
├── build-icons.js      # SVG → Zig transpiler
├── build.zig          # Zig build config
├── react-wrapper.jsx   # React components
├── generated/         # Auto-generated files
│   ├── icons_generated.zig
│   ├── index.js
│   └── index.d.ts
└── libicons.*         # Compiled Zig library

Comparison

| Feature | bertui-icons | lucide-react | react-icons | |---------|--------------|--------------|-------------| | Bundle Size | Minimal | Large | Very Large | | Performance | ⚡⚡⚡ | ⚡ | ⚡ | | Text Overlays | ✅ | ❌ | ❌ | | Unlimited Imports | ✅ | ⚠️ | ⚠️ | | Tech Stack | Zig + Bun | JavaScript | JavaScript |

License

MIT

Credits

• Icons from Lucide
• Built with Zig + Bun
• Part of the BERTUI family

Made with ⚡ by the BERTUI team# bertui-icons