mirror of https://github.com/johndoe6345789/metabuilder.git synced 2026-04-25 06:14:59 +00:00

Files

Richard Ward c729ba30cb docs: packages,lua,log (2 files)

2025-12-30 13:29:58 +00:00

6.8 KiB

Raw Permalink Blame History

Fakemui Icon System

Status: Active Development Philosophy: Zero dependencies, add icons as needed Source: Copy from Heroicons, Lucide, Phosphor as required

Quick Start

import { Plus, Trash, Copy } from '@/fakemui'

function MyComponent() {
  return (
    <button>
      <Plus size={20} weight="bold" />
      Add Item
    </button>
  )
}

Available Icons

This section highlights core, commonly used icons. For the complete set, refer to fakemui/icons/index.ts.

Current icon count: 310 icons (see fakemui/icons/index.ts for the full list)

Actions (5)

Plus - Add, create, new
Trash - Delete, remove
Copy - Duplicate, copy
Check - Confirm, success, done
X - Close, cancel, dismiss

ArrowUp - Move up, scroll up
ArrowDown - Move down, scroll down
ArrowClockwise - Refresh, reload, retry
ChevronUp - Expand up, collapse
ChevronDown - Expand down, show more
ChevronLeft - Previous, back
ChevronRight - Next, forward

Files & UI (8)

FloppyDisk - Save, export
Search - Find, filter
Settings - Configure, preferences
User - Profile, account
Menu - Hamburger menu, navigation
Eye - View, show, visible
EyeSlash - Hide, hidden, password
Pencil - Edit, modify

Communication & Time (4)

Calendar - Date, schedule, events
Clock - Time, duration
Mail - Email, message, contact
Bell - Notifications, alerts

Star - Favorite, bookmark, featured
Heart - Like, love, favorite
Share - Share, export, send

Icon Props

All icons support the following props:

interface IconProps extends React.SVGAttributes<SVGElement> {
  size?: number | string        // Default: 24
  weight?: 'thin' | 'light' | 'regular' | 'bold'  // Default: 'regular'
  // Plus all standard SVG attributes (className, onClick, etc.)
}

Examples

// Size variants
<Plus size={16} />      // Small
<Plus size={24} />      // Default
<Plus size={32} />      // Large

// Weight variants
<Plus weight="thin" />     // strokeWidth: 1
<Plus weight="light" />    // strokeWidth: 1.5
<Plus weight="regular" />  // strokeWidth: 2 (default)
<Plus weight="bold" />     // strokeWidth: 2.5

// Custom styling
<Plus className="text-blue-500" />
<Plus style={{ color: 'red' }} />
<Plus onClick={() => console.log('clicked')} />

Adding New Icons

Step 1: Find the SVG

Recommended Sources:

Heroicons - Tailwind's icon set
Lucide - Beautiful, consistent icons
Phosphor Icons - Flexible icon family

Step 2: Create the Component

Create a new file in fakemui/icons/IconName.tsx:

import React from 'react'
import { Icon, IconProps } from './Icon'

export const IconName = (props: IconProps) => (
  <Icon {...props}>
    {/* Paste SVG paths here */}
    <path d="..." />
    <line x1="..." y1="..." x2="..." y2="..." />
  </Icon>
)

Important:

Use viewBox="0 0 256 256" coordinate system (Phosphor standard)
Icons should be stroke-based, not fill-based
Remove any fill/stroke attributes from paths (Icon component handles this)

Step 3: Export from index.ts

Add to fakemui/icons/index.ts:

export { IconName } from './IconName'

Step 4: Export from main barrel

Add to fakemui/index.ts:

// Icons
export {
  Icon,
  Plus,
  Trash,
  Copy,
  // ... existing icons
  IconName,  // Add your new icon
} from './icons'

Step 5: Update this README

Add your icon to the "Available Icons" section above.

Icon Conversion Guide

From Phosphor Icons

Phosphor uses viewBox="0 0 256 256" - perfect for our system!

// Source: https://phosphoricons.com/
<svg viewBox="0 0 256 256">
  <line x1="40" y1="128" x2="216" y2="128" />
  <line x1="128" y1="40" x2="128" y2="216" />
</svg>

// fakemui component:
export const Plus = (props: IconProps) => (
  <Icon {...props}>
    <line x1="40" y1="128" x2="216" y2="128" />
    <line x1="128" y1="40" x2="128" y2="216" />
  </Icon>
)

From Heroicons

Heroicons uses viewBox="0 0 24 24" - needs scaling!

// Source: https://heroicons.com/
<svg viewBox="0 0 24 24">
  <path d="M12 4.5v15m7.5-7.5h-15" />
</svg>

// Scale by 10.67 (256/24):
export const Plus = (props: IconProps) => (
  <Icon {...props}>
    <path d="M128 48v160m80-80h-160" />
  </Icon>
)

From Lucide

Lucide uses viewBox="0 0 24 24" - same scaling as Heroicons.

// Source: https://lucide.dev/
<svg viewBox="0 0 24 24">
  <path d="M5 12h14" />
  <path d="M12 5v14" />
</svg>

// Scale coordinates:
export const Plus = (props: IconProps) => (
  <Icon {...props}>
    <path d="M53 128h149" />
    <path d="M128 53v149" />
  </Icon>
)

Icon Naming Conventions

PascalCase for component names: ArrowUp, CheckCircle, UserPlus
Descriptive names: prefer Trash over Delete, Copy over Duplicate
Consistent with existing patterns: ArrowUp/Down/Left/Right
Action-oriented: Plus (not Add), Trash (not Remove)

Migration Progress

Phase 1: Core Actions (7/7) ✅

Plus
Trash
Copy
ArrowUp
ArrowDown
ArrowClockwise
FloppyDisk

Phase 2: Common Icons (20/20) ✅

Check
X (Close)
ChevronUp/Down/Left/Right (4 icons)
Search
Settings
User
Menu
Eye/EyeSlash
Edit (Pencil)
Calendar
Clock
Mail
Bell
Star
Heart
Share

Phase 3: Specialized Icons (0/30+) ⏳

Add as needed based on component migration

Icon Size Guidelines

Size	Use Case	Example
12px	Tiny badges, indicators	Status dots
16px	Small UI elements	Inline icons, table cells
20px	Default UI	Buttons, inputs, cards
24px	Standard size	Menu items, toolbars
32px	Large UI	Headers, hero sections
48px+	Feature icons	Landing pages, empty states

Performance Notes

Each icon is ~1KB gzipped
Tree-shakeable (only bundle icons you use)
No runtime dependencies
SSR-friendly
TypeScript definitions included

Comparison to Icon Libraries

Library	Size (full)	Size (10 icons)	Dependencies
fakemui	~10KB	~10KB	Zero
Phosphor Icons	500KB	~50KB	React
Lucide React	300KB	~30KB	React
Heroicons	200KB	~20KB	React
MUI Icons	1MB+	~100KB	MUI, Emotion

Winner: fakemui - smallest bundle, zero deps, full control

Future Enhancements

Animated icon variants (spin, pulse, etc.)
Icon sprite system for even better performance
Auto-generate icons from Figma
Visual icon gallery/documentation
Dark mode variants (if needed)

Last Updated: 2025-12-30 Maintainer: Metabuilder Team

6.8 KiB Raw Permalink Blame History