<!-- source-hash: 7ecf3f317fa8164ab2bb260642085dcc -->
Centralized icon registry mapping string icon names to React components, serving as the single source of truth for icon lookups across the OpenFrame lib and hub.

## Key Components

### `ICON_REGISTRY`
A kebab-case keyed record mapping icon names to `IconComponent` types. Covers Lucide React icons, brand icons (Slack, GitHub, HubSpot, LinkedIn, etc.), and the OpenFrame logo. For social platform icons where both a brand and Lucide variant exist, the kebab key resolves to the brand component while a `-lucide` suffix key accesses the outline variant (e.g., `'github'` → `GitHubIcon`, `'github-lucide'` → `Github`).

### `normalizeIconKey(key: string): string`
Converts PascalCase icon identifiers (from `social_platforms.icon_name` DB column) to their canonical kebab-case registry keys using `PASCAL_TO_KEBAB_ALIASES`. Kebab-case keys pass through unchanged.

### `getIconComponent(iconName)`
Resolves an icon name to its React component. Handles `null`/`undefined` gracefully, falling back to `FileText` so UI chips always render with a glyph.

### `getDynamicIcon(iconName, size, className)`
Renders an icon as a `ReactNode` with a size preset (`xs`/`sm`/`md`/`lg`/`xl`) and optional className. Applies per-icon color overrides (e.g., LinkedIn blue, YouTube red) and falls back to `Globe` for unknown names.

### `OpenFrameLogoIcon`
A local wrapper around `RawOpenFrameLogo` that wires the logo's outer frame color to `currentColor`, making it visible on dark surfaces alongside Lucide icons.

## Usage Example

```typescript
import { getIconComponent, getDynamicIcon, normalizeIconKey } from './icon-registry'

// Resolve a component for custom rendering
const Icon = getIconComponent('hubspot')
// <Icon className="w-5 h-5 text-orange-500" />

// Handle PascalCase keys from social_platforms.icon_name
const Icon2 = getIconComponent('LinkedInIcon') // resolves to LinkedInIcon component

// Render a sized icon node directly
const node = getDynamicIcon('rocket', 'lg')           // 32px Rocket
const node2 = getDynamicIcon('youtube', 'sm')          // 16px YouTubeIcon, color: #FF0000

// Normalize a key manually
normalizeIconKey('GitHubIcon')  // → 'github'
normalizeIconKey('github')      // → 'github' (pass-through)
```

**Adding a new icon:** Import the component, add a `'kebab-key': Component` entry to `ICON_REGISTRY`, and add a `PascalName → 'kebab-key'` row to `PASCAL_TO_KEBAB_ALIASES` if the icon arrives from a PascalCase DB column.

**Source:** [`icon-registry.ts`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/icon-registry.ts)