@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214-snapshot.20260528192313

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

@@ -1,10 +1,12 @@
-<!-- source-hash: 9b0ca1fac5d0c2e9c65b8396255da6ed -->
-A React SVG icon component that renders the Linux penguin (Tux) logo with customizable styling properties.
+<!-- source-hash: 12edb8e83e458c96fac06ad0cb608c47 -->
+A deprecated SVG icon component rendering the Linux (Tux) logo as a 16×16 inline SVG element.
 
 ## Key Components
 
-- **LinuxIconProps**: Interface extending React's SVGProps for type-safe SVG attributes
-- **LinuxIcon**: Functional component that renders the Linux mascot as an inline SVG
+- **`LinuxIconProps`** — Interface extending `React.SVGProps<SVGSVGElement>`, allowing all standard SVG attributes to be passed through.
+- **`LinuxIcon`** — Functional component rendering a Linux mascot SVG with a default white fill color.
+
+> ⚠️ **Deprecated:** This component is deprecated. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
@@ -14,19 +16,17 @@ import { LinuxIcon } from './linux-icon'
 // Basic usage with default white color
 <LinuxIcon />
 
-// Custom styling
-<LinuxIcon 
-  color="#000000" 
-  className="w-8 h-8" 
-  onClick={handleClick}
-/>
-
-// With custom dimensions
-<LinuxIcon 
-  width={24} 
-  height={24} 
-  color="#1a73e8"
-/>
+// Custom color and class
+<LinuxIcon color="#FFC008" className="my-icon" />
+
+// Pass standard SVG props
+<LinuxIcon color="black" width={24} height={24} aria-label="Linux" />
 ```
 
-The component accepts all standard SVG props including `className`, `onClick`, `width`, `height`, and styling attributes. The `color` prop defaults to 'white' and controls the fill color of the penguin silhouette. The viewBox is set to maintain the icon's aspect ratio across different sizes.
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Fill color of the SVG path |
+| `className` | `string` | — | CSS class applied to the `<svg>` element |
+| `...props` | `SVGProps` | — | Any valid SVG element attribute |

package/src/components/icons/.log-out-icon.md

@@ -1,34 +1,26 @@
-<!-- source-hash: f48c14b0bc710c80acd54b512e740e93 -->
-A React component that renders a customizable logout/sign-out SVG icon with configurable styling properties. The icon features a door with an arrow pointing outward, commonly used for logout functionality in user interfaces.
+<!-- source-hash: fd542b48135d5c873a974b8eb2599038 -->
+A deprecated SVG icon component that renders a log-out/sign-out symbol.
 
 ## Key Components
 
-- **LogOutIcon**: Main functional component that renders the SVG logout icon
-- **LogOutIconProps**: TypeScript interface defining the component's props:
-  - `color?: string` - Icon stroke color (defaults to 'white')
-  - `className?: string` - CSS classes for styling (defaults to empty string)
-  - `size?: number` - Icon dimensions in pixels (defaults to 20)
+**`LogOutIcon`** — A React functional component rendering a 24×24 SVG logout icon (door with arrow pointing right).
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Stroke color of the icon |
+| `size` | `number` | `20` | Width and height in pixels |
+| `className` | `string` | `''` | Additional CSS classes |
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { LogOutIcon } from './log-out-icon'
 
-// Basic usage with defaults
+// Default usage
 <LogOutIcon />
 
-// Customized icon
-<LogOutIcon 
-  size={24} 
-  color="#ff4444" 
-  className="hover:opacity-75 transition-opacity cursor-pointer" 
-/>
-
-// In a button
-<button onClick={handleLogout} className="flex items-center gap-2">
-  <LogOutIcon size={16} color="currentColor" />
-  Sign Out
-</button>
-```
-
-The component uses a 24x24 viewBox and renders as a scalable SVG with stroke-based graphics for clean rendering at any size. All props are optional with sensible defaults for immediate use.
+// Custom size and color
+<LogOutIcon size={24} color="#FF0000" className="ml-2" />
+```

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

@@ -1,19 +1,22 @@
-<!-- source-hash: 03d62102dd58267d572796aa617e838e -->
-A React icon component that renders an SVG icon representing logs or documents with bullet points, commonly used in dashboards and navigation interfaces.
+<!-- source-hash: c4d0bc35ab690581007ba4e0eefe766e -->
+A deprecated SVG icon component rendering a "logs/clipboard" visual for use in React UIs.
 
 ## Key Components
 
-**LogsIcon Component**
-- `LogsIconProps` - Interface defining optional props for customization
-- `LogsIcon` - Main functional component that renders the SVG icon
+| Export | Type | Description |
+|--------|------|-------------|
+| `LogsIcon` | `React.FC<LogsIconProps>` | Deprecated SVG logs icon component |
+| `LogsIconProps` | `interface` | Props for size, color, and className customization |
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes for styling |
-| `size` | `number` | `24` | Width and height of the icon in pixels |
-| `color` | `string` | `'white'` | Fill color for the SVG paths |
+| `className` | `string` | `''` | CSS class for styling |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'white'` | SVG fill color |
 
 ## Usage Example
 
@@ -23,18 +26,6 @@ import { LogsIcon } from './logs-icon'
 // Basic usage
 <LogsIcon />
 
-// Customized icon
-<LogsIcon 
-  size={32} 
-  color="#3b82f6" 
-  className="hover:opacity-80 transition-opacity" 
-/>
-
-// In a navigation menu
-<button className="flex items-center gap-2">
-  <LogsIcon size={20} color="currentColor" />
-  <span>View Logs</span>
-</button>
-```
-
-The icon features a document-like container with three bullet points and text lines, making it ideal for representing log files, documentation, or list-based content in user interfaces.
+// Custom size and color
+<LogsIcon size={32} color="#FFC008" className="my-icon" />
+```

package/src/components/icons/.margin-crisis-icon.md

@@ -1,10 +1,20 @@
-<!-- source-hash: 83d97235b7517af077850707114dcca1 -->
-A React component that renders a customizable bar chart icon with three bars of different heights, typically used to represent financial data or margin crisis scenarios.
+<!-- source-hash: 1d7ee0c79aba784f62a0643bdd8a67e7 -->
+A deprecated React SVG icon component representing a margin crisis (bar chart style) graphic with three vertical bars of varying heights.
 
 ## Key Components
 
-- **MarginCrisisIconProps** - Interface defining optional customization props including className, dimensions, and stroke color
-- **MarginCrisisIcon** - Main functional component that renders an SVG bar chart with three ascending bars
+### `MarginCrisisIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class for styling |
+| `width` | `number \| string` | `148` | SVG width |
+| `height` | `number \| string` | `148` | SVG height |
+| `strokeColor` | `string` | `'#F357BB'` | Stroke color for all bars |
+
+### `MarginCrisisIcon`
+Renders a 148×148 viewBox SVG with three rounded rectangular bars (left, center, right) at increasing heights, styled with configurable stroke color and no fill.
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
@@ -14,20 +24,11 @@ import { MarginCrisisIcon } from './margin-crisis-icon';
 // Default usage
 <MarginCrisisIcon />
 
-// Customized with different size and color
-<MarginCrisisIcon 
-  width={100}
-  height={100}
-  strokeColor="#FF6B6B"
-  className="margin-icon"
+// Custom size and color
+<MarginCrisisIcon
+  width={64}
+  height={64}
+  strokeColor="#FF0000"
+  className="my-icon"
 />
-
-// Responsive sizing
-<MarginCrisisIcon 
-  width="100%"
-  height="auto"
-  strokeColor="currentColor"
-/>
-```
-
-The component features three vertical bars of increasing height (left to right), created using SVG path elements with rounded corners. Default dimensions are 148x148px with a magenta stroke color (#F357BB). All props are optional, allowing for flexible styling and integration into different UI contexts.
+```

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

@@ -1,32 +1,31 @@
-<!-- source-hash: 622c720c45d07d3f844f8ee86c7fa6fa -->
-A React component that renders a menu icon using the Lucide React icon library, providing a standardized hamburger menu icon with customizable dimensions and styling.
+<!-- source-hash: 4900c01086835e4e569508706d3b4560 -->
+A thin wrapper around the `lucide-react` `Menu` icon, providing a consistent interface for rendering a hamburger/menu icon with configurable dimensions and styling.
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Key Components
 
-- **MenuIcon**: Main component that wraps the Lucide `Menu` icon
-- **MenuIconProps**: TypeScript interface defining optional props for customization
-- Default values: 24px width/height, empty className
+| Export | Type | Description |
+|--------|------|-------------|
+| `MenuIcon` | `React.FC<MenuIconProps>` | Deprecated menu/hamburger icon component |
+| `MenuIconProps` | `interface` | Props for className, width, and height |
 
 ## Usage Example
 
 ```typescript
 import { MenuIcon } from './menu-icon';
 
-// Basic usage with defaults (24x24px)
+// Default size (24x24)
 <MenuIcon />
 
-// Custom size
-<MenuIcon width={32} height={32} />
-
-// With custom styling
-<MenuIcon className="text-blue-500 hover:text-blue-700" />
-
-// Full customization
-<MenuIcon 
-  className="cursor-pointer transition-colors" 
-  width={20} 
-  height={20} 
-/>
+// Custom size and styling
+<MenuIcon width={32} height={32} className="text-gray-500 hover:text-white" />
 ```
 
-The component is commonly used in navigation bars, mobile menus, and dropdown triggers where a standard hamburger menu icon is needed.
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `""` | CSS class names for styling |
+| `width` | `number` | `24` | Icon width in pixels |
+| `height` | `number` | `24` | Icon height in pixels |

package/src/components/icons/.miami-cyber-gang-logo-face-only.md

@@ -1,40 +1,37 @@
-<!-- source-hash: ad321f94bb04d0fa2cbc5ac1b9395fdd -->
-A React SVG component that renders the face-only version of the Miami Cyber Gang logo, featuring a stylized cyberpunk character with customizable colors and size.
+<!-- source-hash: 5009979d167966f50c769275d90fe2cd -->
+A React SVG component that renders the Miami Cyber Gang logo (face only variant) as a scalable vector graphic.
 
 ## Key Components
 
-- **MiamiCyberGangLogoFaceOnly**: Main React functional component that renders an inline SVG
-- **MiamiCyberGangLogoFaceOnlyProps**: TypeScript interface defining component props
-- **SVG Paths**: Multiple path elements creating the logo design with face, eyes, and distinctive cyber aesthetic
+### `MiamiCyberGangLogoFaceOnly`
+**Status:** `@deprecated` — Use icons from `icons-v2-generated` instead.
 
-## Props
+A functional React component rendering an SVG logo with configurable size and color theming via CSS custom properties or direct hex values.
 
-- `size?: number` - Controls width and height (default: 64px)
-- `originalPink?: string` - Accent color with CSS custom property fallback
-- `originalWhite?: string` - Text/detail color with CSS custom property fallback  
-- `className?: string` - Additional CSS classes for styling
+### Props — `MiamiCyberGangLogoFaceOnlyProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number` | `64` | Width and height of the SVG in pixels |
+| `originalPink` | `string` | `var(--ods-accent, #F357BB)` | Accent color for primary logo elements |
+| `originalWhite` | `string` | `var(--ods-text-on-accent, #FAFAFA)` | Color for text and detail elements |
+| `className` | `string` | `''` | Additional CSS classes for the SVG element |
 
 ## Usage Example
 
 ```typescript
 import { MiamiCyberGangLogoFaceOnly } from './miami-cyber-gang-logo-face-only';
 
-// Basic usage
+// Default usage
 <MiamiCyberGangLogoFaceOnly />
 
 // Custom size and colors
-<MiamiCyberGangLogoFaceOnly 
+<MiamiCyberGangLogoFaceOnly
   size={128}
-  originalPink="#FF1493"
+  originalPink="#FF00AA"
   originalWhite="#FFFFFF"
-  className="logo-animation"
-/>
-
-// Using with design system
-<MiamiCyberGangLogoFaceOnly 
-  size={96}
-  className="header-logo"
+  className="my-logo"
 />
 ```
 
-The component automatically integrates with the ODS (design system) color tokens while providing fallback values, making it suitable for both branded applications and standalone usage.
+> **⚠️ Deprecated:** This component is no longer recommended. Migrate to the equivalent icon from `icons-v2-generated`.

package/src/components/icons/.miami-cyber-gang-logo.md

@@ -1,33 +1,41 @@
-<!-- source-hash: 4747b99ce36c7ccc266955d6c4d8a5e0 -->
-A React component that renders the Miami Cyber Gang logo as an SVG with customizable colors and theming support.
+<!-- source-hash: 6784062b8db4d23d029004a27bde72ee -->
+A deprecated SVG React component that renders the Miami Cyber Gang logo as a scalable vector graphic with customizable colors and size.
 
 ## Key Components
 
-- **MiamiCyberGangLogo**: Main React functional component that renders the logo SVG
-- **MiamiCyberGangLogoProps**: TypeScript interface defining component props including size, colors, and styling options
+### `MiamiCyberGangLogoProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number` | `80` | Width and height of the SVG in pixels |
+| `originalBlack` | `string` | `var(--ods-text-primary, #212121)` | Main circle fill color |
+| `originalPink` | `string` | `var(--ods-accent, #F357BB)` | Accent element fill color |
+| `originalWhite` | `string` | `var(--ods-text-on-accent, #FAFAFA)` | Text and detail fill color |
+| `className` | `string` | `""` | Additional CSS class names |
+
+### `MiamiCyberGangLogo`
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
+
+The exported functional component renders a 120×120 viewBox SVG that scales to the provided `size`. Colors default to ODS (OpenFrame Design System) CSS variables with hex fallbacks.
 
 ## Usage Example
 
 ```typescript
 import { MiamiCyberGangLogo } from './miami-cyber-gang-logo';
 
-// Basic usage with default styling
+// Default usage
 <MiamiCyberGangLogo />
 
 // Custom size and colors
-<MiamiCyberGangLogo 
-  size={120}
+<MiamiCyberGangLogo
+  size={48}
   originalBlack="#000000"
-  originalPink="#FF1493" 
+  originalPink="#FF00AA"
   originalWhite="#FFFFFF"
   className="my-logo"
 />
 
-// Using CSS custom properties (recommended)
-<MiamiCyberGangLogo 
-  size={100}
-  className="themed-logo"
-/>
+// Override only accent color, keep ODS variables for others
+<MiamiCyberGangLogo originalPink="var(--brand-color)" />
 ```
 
-The component features a detailed circular logo design with text elements and decorative shapes. It uses CSS custom properties by default (`--ods-text-primary`, `--ods-accent`, `--ods-text-on-accent`) for automatic theming support, while allowing manual color overrides. The SVG scales proportionally based on the `size` prop while maintaining its 120x120 viewBox aspect ratio.
+> **Migration note:** This component is deprecated. Replace usages with the equivalent icon from the `icons-v2-generated` package to stay aligned with the current ODS icon system.

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

@@ -1,28 +1,30 @@
-<!-- source-hash: 134a00571a012d93192e63dabb699b26 -->
-A React component that renders the MLG (Major League Gaming) logo as an SVG with customizable size and color properties.
+<!-- source-hash: 8b5a0b3583739619ab39fc83bd8b103c -->
+Renders the MLG (Managed Lifecycle Gateway) brand logo as an inline SVG React component with configurable size and color.
 
 ## Key Components
 
-- **MlgLogoProps** - Interface defining optional `color` and `size` props
-- **MlgLogo** - Main component that renders the MLG logo SVG
-- **SVG paths** - Two path elements that form the complete MLG logo design
+### `MlgLogoProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Fill color for the SVG paths |
+| `size` | `number` | `240` | Width and height in pixels |
+
+### `MlgLogo`
+Deprecated SVG logo component. Renders a static SVG at a `1080×1081.4` viewBox, scaling uniformly via the `size` prop.
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { MlgLogo } from './mlg-logo';
 
-// Default logo (240px, white)
+// Default white logo at 240px
 <MlgLogo />
 
-// Custom sized logo
-<MlgLogo size={120} />
-
-// Custom colored logo
-<MlgLogo color="#ff6b35" />
-
-// Fully customized logo
-<MlgLogo size={300} color="#1a1a1a" />
-```
+// Custom color and size
+<MlgLogo color="#FFC008" size={120} />
 
-The component uses a fixed viewBox (0 0 1080 1081.4) that scales proportionally based on the `size` prop. The `color` prop controls the fill color of both SVG paths. Default values are 240px size and white color, making it suitable for dark backgrounds or branded applications.
+// Dark background usage
+<MlgLogo color="black" size={48} />
+```

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

@@ -1,35 +1,45 @@
-<!-- source-hash: 178c449ff80a7c1fb36ba111f04e9134 -->
-A React functional component that renders an SVG moon icon with customizable styling properties.
+<!-- source-hash: e946b1578ed378bc383cc0aaec3385df -->
+SVG moon icon React component used for UI theming or dark mode indicators.
 
 ## Key Components
 
-- **MoonIcon** - Main exported React component that renders a crescent moon SVG
-- **MoonIconProps** - TypeScript interface defining the component's props:
-  - `color` - SVG fill color (default: 'white')
-  - `className` - CSS class for styling
-  - `width` - Icon width in pixels (default: 23)
-  - `height` - Icon height in pixels (default: 24)
+### `MoonIcon`
+**Status: ⚠️ Deprecated** — Use icons from `icons-v2-generated` instead.
+
+A functional React component that renders a crescent moon SVG icon with configurable appearance.
+
+**Props (`MoonIconProps`):**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | SVG fill color |
+| `className` | `string` | `''` | Additional CSS classes |
+| `width` | `number` | `23` | Icon width in pixels |
+| `height` | `number` | `24` | Icon height in pixels |
 
 ## Usage Example
 
 ```typescript
 import { MoonIcon } from './moon-icon';
 
-// Basic usage with defaults
+// Default usage
 <MoonIcon />
 
-// Customized moon icon
-<MoonIcon 
-  color="#1a1a1a" 
-  width={32} 
-  height={32} 
-  className="dark-mode-toggle" 
-/>
-
-// Dark theme toggle button
-<button onClick={toggleDarkMode}>
-  <MoonIcon color="currentColor" className="transition-colors" />
-</button>
+// Custom color and size
+<MoonIcon color="#FFC008" width={32} height={32} />
+
+// With Tailwind class
+<MoonIcon className="opacity-80 hover:opacity-100" color="currentColor" />
 ```
 
-The component uses a fixed viewBox of "0 0 23 24" to maintain consistent proportions regardless of the specified dimensions, making it ideal for theme toggles, navigation icons, or any UI element requiring a moon symbol.
+## Migration Note
+
+This component is deprecated. Replace with the equivalent from the `icons-v2-generated` package:
+
+```typescript
+// ❌ Deprecated
+import { MoonIcon } from './moon-icon';
+
+// ✅ Preferred
+import { MoonIcon } from '@/components/icons-v2-generated';
+```

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

@@ -1,32 +1,43 @@
-<!-- source-hash: 7bf6e3ab9400d9ae91d367d75ae4ff5e -->
-A React component that renders the Microsoft logo as an SVG icon with customizable dimensions and styling.
+<!-- source-hash: f9189b9f5273ec009e112f7eb56e4ff7 -->
+A deprecated React component that renders the Microsoft logo as an inline SVG icon with four colored quadrants.
 
 ## Key Components
 
-- **`MicrosoftIcon`** - Main React functional component that renders the Microsoft four-square logo
-- **`MsIconProps`** - TypeScript interface defining optional props for width, height, and CSS classes
+### `MicrosoftIcon`
+A functional React component rendering the Microsoft four-square logo using hardcoded SVG paths.
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
+
+**Props (`MsIconProps`):**
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `width` | `number \| string` | `24` | Accepted but not applied to SVG |
+| `height` | `number \| string` | `24` | Accepted but not applied to SVG |
+| `className` | `string` | `"text-current"` | Applied to the `<svg>` element |
+
+> **Note:** The `width` and `height` props are accepted by the interface but the SVG element always renders at `24×24`. Only `className` has a runtime effect.
 
 ## Usage Example
 
 ```typescript
 import { MicrosoftIcon } from './ms-icon'
 
-// Default 24x24 icon
+// Basic usage
 <MicrosoftIcon />
 
-// Custom size with CSS class
-<MicrosoftIcon 
-  width={32} 
-  height={32} 
-  className="hover:opacity-80" 
-/>
-
-// Responsive sizing
-<MicrosoftIcon 
-  width="100%" 
-  height="auto" 
-  className="max-w-16" 
-/>
+// With custom className
+<MicrosoftIcon className="w-8 h-8 opacity-75" />
 ```
 
-The component renders Microsoft's iconic four-colored square logo (orange, green, blue, yellow) as an inline SVG. The `width` and `height` props are accepted but the SVG maintains a fixed 24x24 viewBox. The `className` prop defaults to "text-current" for CSS inheritance and can be overridden for custom styling.
+## Migration
+
+This component is deprecated. Replace with the equivalent icon from the `icons-v2-generated` package:
+
+```typescript
+// ❌ Deprecated
+import { MicrosoftIcon } from './ms-icon'
+
+// ✅ Preferred
+import { MicrosoftIcon } from '@/components/icons-v2-generated'
+```

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

@@ -1,35 +1,21 @@
-<!-- source-hash: 246227fd78359af5750b4a5a1ef7f472 -->
-A React component that renders the Nushell shell logo as an SVG icon with customizable size, styling, and color properties.
+<!-- source-hash: 44208ef2fdcac20f377baaf08b15517e -->
+Renders the Nushell shell logo as a configurable SVG icon component. This component is **deprecated** in favor of the `icons-v2-generated` icon set.
 
 ## Key Components
 
-- **`NushellIconProps`** - TypeScript interface defining optional props for size, className, and color
-- **`NushellIcon`** - React functional component that renders the Nushell logo SVG
-- **Default values** - Size defaults to 16px, color to white, with empty className
+- **`NushellIconProps`** — Interface for size, className, and color customization
+- **`NushellIcon`** — React functional component rendering the Nushell SVG path at a configurable size and color
 
 ## Usage Example
 
 ```typescript
 import { NushellIcon } from './nushell-icon'
 
-// Basic usage with defaults (16px, white)
+// Default usage
 <NushellIcon />
 
 // Custom size and color
-<NushellIcon size={24} color="#4a90e2" />
-
-// With custom styling
-<NushellIcon 
-  size={32} 
-  className="hover:opacity-80 transition-opacity" 
-  color="currentColor" 
-/>
-
-// In a button or navigation
-<button className="flex items-center gap-2">
-  <NushellIcon size={20} />
-  Open Nushell
-</button>
+<NushellIcon size={24} color="#FFC008" className="my-icon" />
 ```
 
-The component uses a 24x24 viewBox and scales proportionally based on the size prop. The SVG path renders the distinctive "nu>" prompt symbol that represents the Nushell command-line interface.
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead of this component.