@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214

package/src/components/icons/.open-source-icon.md

@@ -1,36 +1,32 @@
-<!-- source-hash: c2efed1df69d0f2811836051cada449d -->
-A customizable React SVG icon component that renders an open-source symbol featuring angled brackets with a diagonal slash, commonly used to represent coding or open-source development.
+<!-- source-hash: 9dd1aea8ecb4554e90044bebcf14ab7c -->
+A deprecated SVG icon component representing an "open source" symbol, rendered as a React functional component with configurable dimensions and color.
 
 ## Key Components
 
-- **OpenSourceIcon**: Main React functional component that renders the SVG icon
-- **OpenSourceIconProps**: TypeScript interface defining customizable properties:
-  - `color` - Fill color for the icon (default: 'white')
-  - `className` - CSS classes for styling
-  - `width` - Icon width in pixels (default: 19)
-  - `height` - Icon height in pixels (default: 18)
+### `OpenSourceIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Fill color for the SVG paths |
+| `className` | `string` | `""` | Additional CSS classes |
+| `width` | `number` | `19` | SVG width in pixels |
+| `height` | `number` | `18` | SVG height in pixels |
+
+### `OpenSourceIcon`
+A React functional component that renders a 19×18 SVG icon. Marked as **deprecated** — use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { OpenSourceIcon } from './open-source-icon';
 
-// Basic usage with defaults
+// Basic usage
 <OpenSourceIcon />
 
-// Customized with dark theme
-<OpenSourceIcon 
-  color="#333333" 
-  className="hover:opacity-80" 
-  width={24} 
-  height={24} 
-/>
-
-// As a button icon
-<button className="flex items-center gap-2">
-  <OpenSourceIcon color="#10B981" width={16} height={16} />
-  View Source
-</button>
+// Custom color and size
+<OpenSourceIcon color="#FFC008" width={32} height={32} />
+
+// With className for styling
+<OpenSourceIcon className="ml-2 opacity-80" color="black" />
 ```
 
-The SVG uses three path elements to create the bracket-slash design and maintains proper aspect ratio scaling. All props are optional with sensible defaults for immediate use.
+> **⚠️ Deprecated:** This component is marked for removal. Migrate to the `icons-v2-generated` package for up-to-date icon assets.

package/src/components/icons/.openai-icon.md

@@ -1,36 +1,21 @@
-<!-- source-hash: 2646d71a5650d04e54585808ef87c695 -->
-A React component that renders the OpenAI logo as an SVG icon with customizable styling properties.
+<!-- source-hash: 59ece0dc0e7106f67c0eb64eff34376c -->
+Renders the OpenAI logo as an inline SVG icon with configurable size, color, and CSS class.
 
 ## Key Components
 
-- **OpenAiIconProps** - Interface defining the component's props:
-  - `className` - Optional CSS class for styling
-  - `size` - Icon dimensions in pixels (default: 24)
-  - `color` - Fill and stroke color (default: 'white')
+- **`OpenAiIconProps`** — Interface with optional `className`, `size` (default `24`), and `color` (default `'white'`) props
+- **`OpenAiIcon`** — Deprecated functional component that renders the OpenAI SVG logo
 
-- **OpenAiIcon** - Main functional component that renders the OpenAI logo SVG
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { OpenAiIcon } from './openai-icon'
 
-// Basic usage with defaults
+// Basic usage
 <OpenAiIcon />
 
-// Customized icon
-<OpenAiIcon 
-  size={32} 
-  color="#10a37f" 
-  className="ml-2" 
-/>
-
-// Large icon with custom styling
-<OpenAiIcon 
-  size={64} 
-  color="currentColor" 
-  className="hover:opacity-80 transition-opacity" 
-/>
-```
-
-The component uses a 320x320 viewBox and scales proportionally based on the `size` prop. The SVG path contains the official OpenAI logo design with both fill and stroke properties accepting the same color value for consistent appearance.
+// Custom size and color
+<OpenAiIcon size={32} color="#000000" className="my-icon" />
+```

package/src/components/icons/.openframe-ai-icons.md

@@ -1,39 +1,38 @@
-<!-- source-hash: 5f9fd3b564e59b834ea875bbcacb5fc2 -->
-A collection of custom SVG icon components for OpenFrame AI features, providing consistent visual elements with customizable styling through Tailwind CSS classes.
+<!-- source-hash: 824270484127f8228b36f62cc51b4762 -->
+Deprecated SVG icon components for Flamingo's AI feature set, each rendering a 90×90 viewBox icon styled with the Flamingo yellow (`#FFC008`) stroke/fill color.
 
 ## Key Components
 
-- **NaturalLanguageIcon** - Chat bubble icon representing natural language processing capabilities
-- **AutomatedDiagnosticsIcon** - Gear with settings icon for automated system diagnostics
-- **StatusUpdatesIcon** - Bell with notification dot for status update notifications
-- **SmartEscalationIcon** - Bidirectional arrows indicating escalation workflows
-- **ScriptGenerationIcon** - Terminal/code window icon for script generation features
-- **PatchPolicyIcon** - Branching flow diagram representing patch management policies
-- **BulkOperationsIcon** - Checklist icon for bulk operation capabilities
-- **AuditLoggingIcon** - Document with checkmark for audit logging functionality
+| Export | Description |
+|--------|-------------|
+| `NaturalLanguageIcon` | Chat/language bubble icon |
+| `AutomatedDiagnosticsIcon` | Settings/gear with inner circle icon |
+| `StatusUpdatesIcon` | Notification bell with dot indicator |
+| `SmartEscalationIcon` | Dual-arrow escalation path icon |
+| `ScriptGenerationIcon` | Code/terminal window icon |
+| `PatchPolicyIcon` | Git-branch style patch flow icon |
+| `BulkOperationsIcon` | Checklist with multiple rows icon |
+| `AuditLoggingIcon` | Clipboard with checkmark icon |
+
+All components accept an optional `className` prop to control sizing via Tailwind CSS utility classes.
 
 ## Usage Example
 
 ```typescript
-import { NaturalLanguageIcon, AutomatedDiagnosticsIcon } from './openframe-ai-icons';
+import {
+  NaturalLanguageIcon,
+  AutomatedDiagnosticsIcon,
+  AuditLoggingIcon
+} from './openframe-ai-icons';
 
 // Default size (w-12 h-12)
 <NaturalLanguageIcon />
 
-// Custom size
-<AutomatedDiagnosticsIcon className="w-8 h-8 text-blue-500" />
-
-// In a feature grid
-<div className="grid grid-cols-2 gap-4">
-  <div className="flex items-center space-x-2">
-    <NaturalLanguageIcon className="w-6 h-6" />
-    <span>Natural Language Processing</span>
-  </div>
-  <div className="flex items-center space-x-2">
-    <AutomatedDiagnosticsIcon className="w-6 h-6" />
-    <span>Automated Diagnostics</span>
-  </div>
-</div>
+// Custom size via className
+<AutomatedDiagnosticsIcon className="w-8 h-8" />
+
+// Larger display
+<AuditLoggingIcon className="w-16 h-16" />
 ```
 
-All icons use a consistent golden yellow stroke color (#FFC008) and accept optional `className` props for responsive sizing and additional styling.
+> ⚠️ **Deprecated** — All icons in this file are marked `@deprecated`. Migrate to the updated equivalents from `icons-v2-generated` for current and future use.

package/src/components/icons/.openframe-logo.md

@@ -1,36 +1,42 @@
-<!-- source-hash: a8cfb3e9064a971835788a6e9dd133bd -->
-A React SVG component that renders the OpenFrame logo with customizable colors and standard SVG properties.
+<!-- source-hash: a184b02555fefde54d8cdd5ee8373d98 -->
+A deprecated SVG icon component rendering the OpenFrame logo as a 32×32 inline SVG with customizable fill colors for its two visual layers.
 
 ## Key Components
 
-- **OpenFrameLogo**: Main component that renders an SVG logo with a distinctive L-shaped frame design
-- **Props Interface**: Extends `React.SVGProps<SVGSVGElement>` with optional color customization:
-  - `className`: CSS class for styling
-  - `lowerPathColor`: Color for the white squares/blocks (defaults to '#ffffff')
-  - `upperPathColor`: Color for the main frame/border (defaults to '#1A1A1A')
+### `OpenFrameLogo`
+**Status:** `@deprecated` — migrate to icons from `icons-v2-generated` instead.
+
+A React SVG component accepting the following props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | CSS class applied to the `<svg>` element |
+| `lowerPathColor` | `string` | `#ffffff` | Fill color for the four inner squares (bottom-right quadrant) |
+| `upperPathColor` | `string` | `#1A1A1A` | Fill color for the outer frame/border path |
+| `...props` | `React.SVGProps<SVGSVGElement>` | — | Any standard SVG attribute |
+
+The SVG also exposes a `--fill-0` CSS custom property set to `currentColor`, enabling color theming via CSS.
 
 ## Usage Example
 
 ```typescript
 import { OpenFrameLogo } from './openframe-logo';
 
-// Basic usage with default colors
-<OpenFrameLogo className="w-8 h-8" />
+// Default colors (white squares, dark frame)
+<OpenFrameLogo className="my-logo" />
 
-// Custom colors
-<OpenFrameLogo 
-  className="w-12 h-12"
-  lowerPathColor="#00ff00"
-  upperPathColor="#333333"
+// Custom brand colors
+<OpenFrameLogo
+  upperPathColor="#FFC008"
+  lowerPathColor="#000000"
+  width={48}
+  height={48}
 />
 
-// With additional SVG props
-<OpenFrameLogo 
-  className="logo"
-  width={64}
-  height={64}
-  style={{ marginRight: '10px' }}
-/>
+// Inherits text color via currentColor
+<span style={{ color: 'blue' }}>
+  <OpenFrameLogo upperPathColor="currentColor" />
+</span>
 ```
 
-The logo features a 32x32 viewBox with an L-shaped frame containing four white squares positioned in the top-right, bottom-left, bottom-right, and bottom-center areas. The design uses CSS custom properties for color theming and maintains accessibility through currentColor fallbacks.
+> **Migration note:** This component is deprecated. Use the equivalent icon from `icons-v2-generated` for new implementations.

package/src/components/icons/.openframe-text.md

@@ -1,40 +1,37 @@
-<!-- source-hash: 944d8ab8b8264238503a8fe36afe4f79 -->
-A React SVG component that renders the "OpenFrame" logo text as scalable vector graphics with customizable text color.
+<!-- source-hash: 9ca58040b2284702dbc57d74390bc0ad -->
+A deprecated SVG React component that renders the "OpenFrame" wordmark as inline SVG with a customizable text color.
 
 ## Key Components
 
-**OpenFrameText** - Main component that renders the OpenFrame logo text as an SVG element with the following features:
-- Extends all standard SVG props for full flexibility
-- Customizable text color via `textColor` prop (defaults to `#1A1A1A`)
-- Fixed dimensions (87x15) with responsive scaling via `viewBox`
-- CSS custom property support for advanced styling
-- Individual letter paths for crisp rendering at any scale
+### `OpenFrameText`
+An SVG icon component rendering the full "OpenFrame" text logo at 87×15px.
+
+**Props** (extends `React.SVGProps<SVGSVGElement>`):
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | CSS class for the SVG element |
+| `textColor` | `string` | `'#1A1A1A'` | Fill color for all letterform paths |
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { OpenFrameText } from './openframe-text';
 
-// Basic usage with default styling
+// Default dark text
 <OpenFrameText />
 
-// With custom text color
-<OpenFrameText textColor="#FF6B35" />
-
-// With additional SVG props and custom styling
-<OpenFrameText 
-  className="logo-text"
-  textColor="#2563EB"
-  width={174}
-  height={30}
-  style={{ filter: 'drop-shadow(2px 2px 4px rgba(0,0,0,0.1))' }}
-/>
-
-// Using currentColor for theme integration
-<OpenFrameText 
-  textColor="currentColor"
-  className="text-primary"
-/>
+// White wordmark for dark backgrounds
+<OpenFrameText textColor="#FFFFFF" className="my-4" />
+
+// Custom brand color
+<OpenFrameText textColor="#FFC008" style={{ width: 120 }} />
 ```
 
-The component maintains crisp text rendering at any size while providing full control over color and standard SVG properties like dimensions, classes, and CSS transforms.
+## Notes
+
+- The component spreads all standard `SVGProps`, so attributes like `style`, `aria-label`, `onClick`, etc. are fully supported.
+- The `--fill-0` CSS custom property is set to `currentColor`, enabling color overrides via CSS `color` if needed alongside `textColor`.
+- The viewBox is fixed at `0 0 87 15`; scale via CSS `width`/`height` rather than the SVG attributes directly.

package/src/components/icons/.openmsp-logo.md

@@ -1,36 +1,39 @@
-<!-- source-hash: 740df77a6d8e5bcddfedd8abd3e5952f -->
-A customizable React SVG component that renders the OpenMSP logo with configurable colors for different design elements including bubbles and shapes.
+<!-- source-hash: 2f47181cc86a822d715154dd50854723 -->
+A deprecated SVG React component that renders the OpenMSP logo with two overlapping speech bubbles and a circular accent, supporting customizable fill colors.
 
 ## Key Components
 
-- **OpenmspLogoProps**: Interface extending `React.SVGProps<SVGSVGElement>` with custom color properties
-- **OpenmspLogo**: Main component function that renders the SVG logo with customizable styling
-- **Color Props**: `frontBubbleColor`, `innerFrontBubbleColor`, `backBubbleColor` for theme customization
-- **Standard SVG Props**: Supports all standard SVG attributes through prop spreading
+### `OpenmspLogoProps`
+Extends `React.SVGProps<SVGSVGElement>` with the following optional props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class for the SVG element |
+| `frontBubbleColor` | `string` | `#000000` | Fill color for the front speech bubble and circle |
+| `innerFrontBubbleColor` | `string` | `#ffffff` | Fill color for the inner area of the front bubble |
+| `backBubbleColor` | `string` | `#ffffff` | Fill color for the back speech bubble |
+| `color` | `string` | — | Inherited SVG color prop (not applied internally) |
+
+### `OpenmspLogo`
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
+
+Renders a 97×96 SVG logo composed of three layered paths and a circle.
 
 ## Usage Example
 
 ```typescript
 import { OpenmspLogo } from './openmsp-logo';
 
-// Basic usage with defaults
-<OpenmspLogo className="w-24 h-24" />
-
-// Customized colors
-<OpenmspLogo 
-  frontBubbleColor="#007ACC"
-  innerFrontBubbleColor="#E3F2FD"
-  backBubbleColor="#F5F5F5"
-  className="logo-header"
-/>
+// Default (black front bubble, white back bubble)
+<OpenmspLogo />
 
-// With additional SVG props
-<OpenmspLogo 
-  width={120}
-  height={120}
-  frontBubbleColor="#FF6B35"
-  onClick={() => console.log('Logo clicked')}
+// Custom brand colors
+<OpenmspLogo
+  className="w-12 h-12"
+  frontBubbleColor="#FFC008"
+  innerFrontBubbleColor="#1a1a1a"
+  backBubbleColor="#333333"
 />
 ```
 
-The component renders a complex layered logo design with overlapping rectangular and circular elements, perfect for branding applications where consistent visual identity with theme flexibility is needed.
+> **Migration:** Replace usages with the equivalent export from `icons-v2-generated` to stay on the supported icon set.

package/src/components/icons/.pilot-icon.md

@@ -0,0 +1,23 @@
+<!-- source-hash: 05d712fa4048e46c12b403706759e537 -->
+SVG icon component for the "Pilot" brand/logo mark, rendering the stylized "pilot" wordmark as inline SVG.
+
+## Key Components
+
+**`PilotIconProps`** — Interface defining optional props:
+- `className` — CSS classes for sizing/layout (defaults to `'w-6 h-6'`)
+- `color` — Fill color for the SVG paths (defaults to `'var(--ods-system-greys-white)'`)
+
+**`PilotIcon`** — Functional component exporting the Pilot logo as an inline SVG with a `156.8 x 83` viewBox.
+
+## Usage Example
+
+```typescript
+// Default white icon at 24x24px
+<PilotIcon />
+
+// Custom size and color
+<PilotIcon className="w-10 h-10" color="#FFC008" />
+
+// Inheriting color from parent via currentColor
+<PilotIcon color="currentColor" className="w-8 h-8 text-gray-900" />
+```

package/src/components/icons/.powershell-icon.md

@@ -1,33 +1,28 @@
-<!-- source-hash: f30ccc17032c5f25106297bf252b1ff9 -->
-A React component that renders a PowerShell terminal icon as an SVG element with customizable styling properties.
+<!-- source-hash: d514ced03ad14f87fd1b18047f83f73e -->
+A deprecated React component that renders a PowerShell icon as an inline SVG.
 
 ## Key Components
 
-- **`PowerShellIconProps`** - TypeScript interface defining optional props for size, CSS class, and color
-- **`PowerShellIcon`** - Functional React component that renders the PowerShell logo SVG
-- **Default props** - Size defaults to 16px, empty className, and white color
+### `PowerShellIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number` | `16` | Width and height of the SVG in pixels |
+| `className` | `string` | `''` | Additional CSS classes |
+| `color` | `string` | `'white'` | Fill color for the icon path |
+
+### `PowerShellIcon`
+A functional React component rendering a `128×128` viewBox PowerShell SVG icon, scaled via the `size` prop.
+
+> ⚠️ **Deprecated** — This component and its props interface are deprecated. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { PowerShellIcon } from './powershell-icon'
 
-// Basic usage with defaults (16px, white)
+// Basic usage
 <PowerShellIcon />
 
-// Custom sizing and styling
-<PowerShellIcon 
-  size={24} 
-  className="icon-button" 
-  color="#0078d4" 
-/>
-
-// Large blue icon for headers
-<PowerShellIcon 
-  size={48} 
-  color="#012456" 
-  className="header-icon" 
-/>
-```
-
-The component uses a scalable SVG with the official PowerShell logo design, featuring the characteristic "PS" prompt symbol with angled brackets. The `viewBox` is fixed at "0 0 128 128" while the actual dimensions scale with the `size` prop.
+// Custom size and color
+<PowerShellIcon size={32} color="#0078D4" className="my-icon" />
+```

package/src/components/icons/.python-icon.md

@@ -1,36 +1,29 @@
-<!-- source-hash: 5095f65679d81750b35071192aa9ae9b -->
-A React component that renders a scalable Python logo SVG icon with customizable size, color, and styling properties.
+<!-- source-hash: b8e6f4503e06d30d835f72f0621dd708 -->
+Renders a Python logo SVG icon as a React functional component. **Deprecated** — use icons from `icons-v2-generated` instead.
 
 ## Key Components
 
-- **PythonIconProps**: Interface defining the component's props
-  - `size?: number` - Icon dimensions (default: 16px)
-  - `className?: string` - Additional CSS classes
-  - `color?: string` - Fill color (default: 'white')
-- **PythonIcon**: Main functional component that renders the Python logo as an SVG
-- **displayName**: Set to 'PythonIcon' for debugging purposes
+- **`PythonIconProps`** — Interface defining optional `size`, `className`, and `color` props
+- **`PythonIcon`** — Deprecated React FC rendering a scalable Python SVG icon
 
 ## Usage Example
 
 ```typescript
 import { PythonIcon } from './python-icon'
 
-// Basic usage with defaults
+// Default usage (16px, white)
 <PythonIcon />
 
-// Customized icon
-<PythonIcon 
-  size={24} 
-  color="#3776ab" 
-  className="programming-language-icon" 
-/>
-
-// Large icon with custom styling
-<PythonIcon 
-  size={48} 
-  color="currentColor" 
-  className="tech-stack-logo hover:opacity-80" 
-/>
+// Custom size and color
+<PythonIcon size={32} color="#3776AB" className="my-icon" />
 ```
 
-The component renders the official Python logo with its characteristic interlocking snake design. The SVG is optimized with a 1024x1024 viewBox and uses fill-based coloring for easy customization. Perfect for tech stacks, programming language indicators, or anywhere you need a recognizable Python representation.
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number` | `16` | Width and height in pixels |
+| `className` | `string` | `''` | CSS class name |
+| `color` | `string` | `'white'` | SVG fill color |
+
+> **⚠️ Deprecated:** This component is deprecated. Use the equivalent icon from `icons-v2-generated` instead.

package/src/components/icons/.queries-icon.md

@@ -1,32 +1,24 @@
-<!-- source-hash: 5d0373f2cd04c39b76eb1204b8300e5b -->
-A React SVG icon component that renders a queries or bracket-style icon with customizable styling properties.
+<!-- source-hash: 1e273b70b1ec191003140adc40f2cb43 -->
+Deprecated SVG icon component rendering a "queries" symbol (curly braces with dots) at 24×24px.
 
 ## Key Components
 
-- **QueriesIconProps** - Interface extending React's SVGProps with an optional `color` prop
-- **QueriesIcon** - Functional component that renders an SVG with bracket-like shapes and dots
+- **`QueriesIconProps`** — Extends `React.SVGProps<SVGSVGElement>` with an optional `color` prop (defaults to `'white'`)
+- **`QueriesIcon`** — Functional component that renders a 24×24 SVG queries icon
+
+> ⚠️ **Deprecated:** Both the interface and component are marked as deprecated. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { QueriesIcon } from './queries-icon'
 
-// Basic usage with default white color
+// Basic usage
 <QueriesIcon />
 
-// Custom color and className
-<QueriesIcon 
-  color="#3b82f6" 
-  className="w-6 h-6" 
-/>
-
-// With additional SVG props
-<QueriesIcon 
-  color="currentColor"
-  width={32}
-  height={32}
-  onClick={handleClick}
-/>
-```
-
-The icon features a symmetrical bracket design with three circular elements in the center, making it suitable for representing database queries, data connections, or API endpoints. The component accepts standard SVG props and defaults to 24x24 dimensions with white fill color.
+// With custom color and className
+<QueriesIcon color="#FFC008" className="my-icon" />
+
+// With inherited SVG props
+<QueriesIcon color="black" width={32} height={32} aria-label="Queries" />
+```

package/src/components/icons/.reddit-icon.md

@@ -1,35 +1,39 @@
-<!-- source-hash: c18f61d4d30ae1a0cf8fe3c590622e88 -->
-A React SVG icon component for displaying the Reddit logo with customizable styling and color variants.
+<!-- source-hash: dba2c4f477a33c8597950e8e9343345c -->
+Deprecated SVG icon component for Reddit, rendering the Reddit logo with configurable size, color variant, and CSS class support.
 
 ## Key Components
 
-- **RedditIcon**: Main component that renders an SVG Reddit logo
-- **RedditIconProps**: TypeScript interface defining component props
-- **variant**: Color scheme selector supporting 'original' (orange), 'grayscale', and 'white' variants
-- **Responsive sizing**: Configurable width/height with sensible defaults
+### `RedditIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number \| string` | `24` | SVG width |
+| `height` | `number \| string` | `24` | SVG height |
+| `className` | `string` | `"text-current"` | CSS class |
+| `variant` | `'original' \| 'grayscale' \| 'white'` | `'grayscale'` | Color scheme |
+
+### Color Variants
+| Variant | Background Color |
+|---------|-----------------|
+| `original` | `#FF4500` (Reddit orange) |
+| `grayscale` | `#888888` (medium gray) |
+| `white` | `#FFFFFF` (white) |
+
+### `RedditIcon` *(deprecated)*
+Renders a 256×256 viewBox SVG of the Reddit logo (Snoo alien head) using a single filled path.
+
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { RedditIcon } from './reddit-icon'
 
-// Basic usage with default grayscale variant
+// Default grayscale, 24×24
 <RedditIcon />
 
-// Large orange Reddit icon
-<RedditIcon 
-  width={48} 
-  height={48} 
-  variant="original" 
-  className="hover:scale-110 transition-transform"
-/>
-
-// White variant for dark backgrounds
-<RedditIcon 
-  variant="white" 
-  width="2rem" 
-  className="opacity-80"
-/>
-```
-
-The component uses a high-quality 256x256 viewBox SVG path and dynamically applies colors based on the selected variant. The `className` prop allows for additional CSS styling while maintaining the icon's scalability and accessibility.
+// Reddit brand orange, larger size
+<RedditIcon variant="original" width={48} height={48} />
+
+// White variant with custom class
+<RedditIcon variant="white" className="opacity-75" />
+```