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

package/src/components/icons/.remote-control-icon.md

@@ -1,30 +1,26 @@
-<!-- source-hash: 9ab5b66106f5d910335ad43c47b934bd -->
-A React component that renders an SVG icon representing a remote control or wireless connection symbol, featuring a circular chain-like design with customizable styling properties.
+<!-- source-hash: cf3664ac4c7256ea1e28dfd3a3ffdff2 -->
+SVG icon component for representing remote control functionality, marked as deprecated in favor of the newer `icons-v2-generated` icon library.
 
 ## Key Components
 
-- **RemoteControlIcon**: Main functional component that renders an SVG icon
-- **Props interface**: Accepts `className`, `size`, and `color` properties for customization
-- **SVG paths**: Two path elements creating a chain-link or remote control visual
+**`RemoteControlIcon`** — A React functional component that renders a remote control SVG icon with two path elements forming a circular/rotated square shape with a small accent mark.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `"w-5 h-5"` | Tailwind/CSS class for sizing |
+| `size` | `number` | `22` | Width and height in pixels |
+| `color` | `string` | `"white"` | SVG fill color |
 
 ## Usage Example
 
 ```typescript
 import { RemoteControlIcon } from './remote-control-icon'
 
-// Default usage (white, 22px)
+// Default usage
 <RemoteControlIcon />
 
-// Custom styling
-<RemoteControlIcon 
-  className="w-8 h-8 text-blue-500" 
-  size={32} 
-  color="currentColor" 
-/>
-
-// Different colors and sizes
-<RemoteControlIcon size={16} color="#FF6B6B" />
-<RemoteControlIcon className="hover:opacity-80" color="black" />
+// Custom size and color
+<RemoteControlIcon size={32} color="#FFC008" className="w-8 h-8" />
 ```
 
-The component uses default values of 22px size, white color, and Tailwind CSS classes for dimensions. The `color` prop directly sets the SVG fill, while `className` allows for additional styling including hover states and responsive classes.
+> **⚠️ Deprecated:** This component is deprecated. Use icons from `icons-v2-generated` instead.

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

@@ -1,32 +1,40 @@
-<!-- source-hash: 33b5459218a96c4d8615f82d8d054e6d -->
-A React functional component that renders an SVG icon representing curly braces, commonly used to indicate script or code content.
+<!-- source-hash: 912f09df859ad85090e143199285f8e8 -->
+Brief description of the file's purpose: Renders a deprecated SVG script/code bracket icon component for use in React applications.
 
 ## Key Components
 
-- **ScriptIcon**: The main React component that renders an SVG with curly brace paths
-- **Props interface**: Accepts `className`, `size`, and `color` props for customization
-- **SVG paths**: Two path elements that create left and right curly brace shapes
+- **`ScriptIcon`** — A React functional component that renders an SVG icon resembling curly braces `{ }`, commonly used to represent scripts or code blocks.
+
+> ⚠️ **Deprecated:** This component is marked as deprecated. Use icons from `icons-v2-generated` instead.
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `"w-5 h-5"` | Tailwind/CSS class for sizing and styling |
+| `size` | `number` | `22` | SVG width and height in pixels |
+| `color` | `string` | `"white"` | SVG fill color |
 
 ## Usage Example
 
 ```typescript
 import { ScriptIcon } from './script-icon'
 
-// Basic usage with defaults
+// Default usage
 <ScriptIcon />
 
-// Custom sizing and styling
-<ScriptIcon 
-  size={32} 
-  color="blue" 
-  className="w-8 h-8 mr-2" 
-/>
-
-// In a button or navigation item
-<button className="flex items-center">
-  <ScriptIcon size={16} color="currentColor" />
-  <span>Scripts</span>
-</button>
+// Custom size and color
+<ScriptIcon size={32} color="#FFC008" className="w-8 h-8" />
 ```
 
-The component provides sensible defaults (22px size, white color, w-5 h-5 classes) while allowing full customization through props. The SVG uses a 24x22 viewBox and renders symmetrical curly braces that scale cleanly at any size.
+## Migration
+
+Replace usages with the equivalent icon from the `icons-v2-generated` package:
+
+```typescript
+// ❌ Deprecated
+import { ScriptIcon } from './script-icon'
+
+// ✅ Preferred
+import { ScriptIcon } from '@/components/icons-v2-generated'
+```

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

@@ -1,32 +1,32 @@
-<!-- source-hash: eabd71c8d5236e6913f1bffcee372239 -->
-A reusable React SVG component that renders a search icon with customizable styling properties.
+<!-- source-hash: 7d2710e556643f3de8f481767c4c93ff -->
+A deprecated SVG search icon React component with configurable size, color, and styling props.
 
 ## Key Components
 
-- **SearchIcon**: Main functional component that renders an SVG search icon
-- **SearchIconProps**: TypeScript interface defining customizable props (color, dimensions, className)
+### `SearchIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `#888888` | Fill color for the SVG paths |
+| `width` | `number` | `22` | Width in pixels |
+| `height` | `number` | `22` | Height in pixels |
+| `className` | `string` | `''` | Additional CSS classes |
+
+### `SearchIcon`
+Renders a 22×22 viewBox SVG magnifying glass icon. Marked as **deprecated** — use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { SearchIcon } from './search-icon';
 
-function SearchBar() {
-  return (
-    <div className="search-container">
-      {/* Default icon */}
-      <SearchIcon />
-      
-      {/* Customized icon */}
-      <SearchIcon 
-        width={24}
-        height={24}
-        color="#0070f3"
-        className="search-input-icon"
-      />
-    </div>
-  );
-}
+// Default usage
+<SearchIcon />
+
+// Custom size and color
+<SearchIcon width={32} height={32} color="#FFC008" />
+
+// With className
+<SearchIcon className="search-input-icon" color="#333333" />
 ```
 
-The component provides sensible defaults (22x22 pixels, gray color) and accepts optional props for customization. The SVG uses a magnifying glass design with proper viewBox scaling and accessible markup.
+> ⚠️ **Deprecated:** This component is no longer recommended. Migrate to the `icons-v2-generated` package for updated icon support.

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

@@ -1,10 +1,12 @@
-<!-- source-hash: d6fcd9801d79fc02fd11be3dc90bf006 -->
-A React component that renders a paper airplane send icon as an SVG, commonly used for submit buttons and messaging interfaces.
+<!-- source-hash: 7a13b0e57f46cf73bfc4d05d1ab7ac44 -->
+Brief description: A deprecated SVG send/paper-plane icon React component with configurable size and fill color.
 
 ## Key Components
 
-- **SendIconProps**: Interface defining optional `className` and `fill` props for customization
-- **SendIcon**: Functional component that renders a stylized paper airplane SVG icon
+- **`SendIconProps`** — Interface accepting optional `className` (default: `"w-6 h-6"`) and `fill` (default: `"#1A1A1A"`) props
+- **`SendIcon`** — ⚠️ Deprecated functional component rendering a 24×24 SVG send icon
+
+> **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
@@ -14,17 +16,13 @@ import { SendIcon } from './send-icon';
 // Default usage
 <SendIcon />
 
-// Custom styling
-<SendIcon 
-  className="w-8 h-8" 
-  fill="#3B82F6" 
-/>
-
-// In a button
-<button className="flex items-center gap-2">
-  Send Message
-  <SendIcon className="w-4 h-4" fill="white" />
-</button>
+// Custom size and color
+<SendIcon className="w-4 h-4" fill="#FFC008" />
 ```
 
-The component uses a 24x24 viewBox with customizable dimensions via className (defaults to `w-6 h-6`) and fill color (defaults to dark gray `#1A1A1A`). The SVG paths create a modern paper airplane design suitable for send/submit actions in forms and messaging UIs.
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `"w-6 h-6"` | Tailwind/CSS class for sizing |
+| `fill` | `string` | `"#1A1A1A"` | SVG fill color |

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

@@ -1,32 +1,43 @@
-<!-- source-hash: 195957532d1cee7550138d38fdb7753f -->
-A React component that renders a customizable settings icon as an SVG with a hexagonal outer shape and circular center element.
+<!-- source-hash: b4d94b8f8123ef1ed4d4da8255b6d8c3 -->
+A deprecated React SVG icon component that renders a hexagonal settings/gear icon with a circular center element.
 
 ## Key Components
 
-- **SettingsIconProps**: Interface defining optional props for styling customization
-- **SettingsIcon**: Main component function that renders the SVG icon
-- **SVG Elements**: Two path elements creating the hexagonal border and inner circle
+| Export | Type | Description |
+|--------|------|-------------|
+| `SettingsIcon` | `React.FC` | Renders a 24×22 SVG settings icon |
+| `SettingsIconProps` | `interface` | Props for size, color, and className |
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class applied to the wrapper |
+| `size` | `number` | `20` | Icon size (accepted but not applied to SVG) |
+| `color` | `string` | `'white'` | Fill color for both SVG paths |
 
 ## Usage Example
 
 ```typescript
 import { SettingsIcon } from './settings-icon'
 
-// Basic usage with defaults (white color, size 20)
+// Basic usage
 <SettingsIcon />
 
-// Customized with different color and CSS class
-<SettingsIcon 
-  className="hover:opacity-80 cursor-pointer" 
-  color="#3b82f6" 
-/>
-
-// Larger size for buttons or headers
-<SettingsIcon 
-  size={32}
-  color="currentColor" 
-  className="text-gray-600"
-/>
+// Custom color
+<SettingsIcon color="#FFC008" className="my-icon" />
+```
+
+## ⚠️ Deprecation Notice
+
+This component is **deprecated**. Use the equivalent icon from `icons-v2-generated` instead:
+
+```typescript
+// ❌ Deprecated
+import { SettingsIcon } from './settings-icon'
+
+// ✅ Preferred
+import { SettingsIcon } from '@/components/icons-v2-generated'
 ```
 
-The component accepts optional `className`, `size`, and `color` props with sensible defaults. The SVG uses a fixed 24x22 viewBox regardless of the size prop, ensuring consistent proportions. The `fill` attribute uses the `color` prop value, defaulting to white, making it suitable for dark backgrounds or can be set to `"currentColor"` to inherit from parent text color.
+> **Note:** The `size` prop is accepted but not applied to the SVG viewport — the icon renders at a fixed `24×22` regardless of the `size` value passed.

package/src/components/icons/.shape-circle-dash-icon.md

@@ -1,37 +1,32 @@
-<!-- source-hash: 346118640da5b504cff3a5f792d5a8c6 -->
-A React icon component that renders a dashed circle SVG with customizable styling and fill options.
+<!-- source-hash: 040ec56d1849fad51f688ce0b2c4eb7a -->
+A deprecated SVG icon component that renders a dashed circle shape, intended to be replaced by icons from `icons-v2-generated`.
 
 ## Key Components
 
-- **ShapeCircleDashIcon** - Main functional component that renders a dashed circle SVG
-- **ShapeCircleDashIconProps** - TypeScript interface defining component props:
-  - `className` - Optional CSS class string
-  - `size` - Icon dimensions in pixels (default: 24)
-  - `color` - Stroke and fill color (default: 'white')
-  - `full` - Boolean to toggle filled vs outlined style (default: false)
+### `ShapeCircleDashIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'white'` | Stroke (and fill when `full`) color |
+| `full` | `boolean` | `false` | Toggles filled vs. outline rendering |
+
+### `ShapeCircleDashIcon`
+Renders a 24×24 SVG circle with a `4 2` dash pattern stroke and rounded line caps.
 
 ## Usage Example
 
 ```typescript
-import { ShapeCircleDashIcon } from './shape-circle-dash-icon'
-
-// Basic usage with defaults (24px, white, outlined)
+// Outline dashed circle (default)
 <ShapeCircleDashIcon />
 
-// Customized icon
+// Filled dashed circle with custom size and color
 <ShapeCircleDashIcon
   size={32}
-  color="#3B82F6"
+  color="#FFC008"
   full={true}
   className="my-icon"
 />
-
-// Outlined version with custom styling
-<ShapeCircleDashIcon
-  size={16}
-  color="currentColor"
-  className="text-gray-600"
-/>
 ```
 
-The component uses a 4-2 dash pattern with rounded line caps, creating a subtle dashed circle effect. The `full` prop controls whether the circle appears as a filled shape or just the dashed outline.
+> ⚠️ **Deprecated:** This component is marked for removal. Use the equivalent icon from `icons-v2-generated` instead.

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

@@ -1,32 +1,28 @@
-<!-- source-hash: e093d2ebb6883819691e4d21e7080b3a -->
-A React component that renders a terminal shell icon as an SVG, commonly used in development and command-line interfaces.
+<!-- source-hash: 76f93a8942800976ff66d5edfda5aee0 -->
+A deprecated shell/terminal icon SVG component for React.
 
 ## Key Components
 
-- **ShellIcon**: React functional component that renders a terminal shell SVG icon
-- **Props interface**: Accepts `className`, `size`, and `color` parameters for customization
-- **SVG path**: Terminal window outline with command prompt indicator
+- **`ShellIcon`** — A React SVG icon that renders a terminal/shell window symbol with a prompt indicator and cursor line.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `"w-5 h-5"` | CSS class for the SVG element |
+| `size` | `number` | `22` | Width and height in pixels |
+| `color` | `string` | `"white"` | Stroke color of the icon paths |
 
 ## Usage Example
 
 ```typescript
 import { ShellIcon } from './shell-icon'
 
-// Basic usage with defaults
+// Default usage
 <ShellIcon />
 
-// Customized with different size and color
-<ShellIcon 
-  size={32} 
-  color="black" 
-  className="w-8 h-8" 
-/>
-
-// In a button or navigation
-<button className="flex items-center gap-2">
-  <ShellIcon size={16} color="currentColor" />
-  Terminal
-</button>
+// Custom size and color
+<ShellIcon size={32} color="#FFC008" className="w-8 h-8" />
 ```
 
-The component uses a transparent fill with a colored stroke to create a clean, outline-style terminal icon. Default styling provides a 22px white icon with Tailwind CSS classes for responsive sizing.
+> ⚠️ **Deprecated:** This component is deprecated. Use icons from `icons-v2-generated` instead.

package/src/components/icons/.shield-check-icon.md

@@ -1,48 +1,35 @@
-<!-- source-hash: 7288a7565c842659829307e5d13511b5 -->
-A React component that renders a shield with checkmark icon, commonly used to indicate security, verification, or protection status in UI designs.
+<!-- source-hash: b46d75024d971a9ecce21beeccfd59c4 -->
+A deprecated React SVG icon component rendering a shield with a checkmark, used for security or verification UI elements.
 
 ## Key Components
 
-- **ShieldCheckIcon**: Main functional component that renders an SVG shield icon with a checkmark
-- **ShieldCheckIconProps**: TypeScript interface defining customizable props for styling and dimensions
+- **`ShieldCheckIconProps`** — Interface defining optional props: `className`, `size`, `color`, and `strokeWidth`
+- **`ShieldCheckIcon`** — Named export rendering a 24×24 SVG shield-check icon with configurable appearance
 
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | CSS classes for styling |
-| `size` | `number` | `24` | Width and height in pixels |
-| `color` | `string` | `'white'` | Stroke color for the icon |
-| `strokeWidth` | `number` | `1.5` | Line thickness of the strokes |
+> ⚠️ **Deprecated:** This component is deprecated. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { ShieldCheckIcon } from './shield-check-icon'
 
-// Basic usage
+// Default usage
 <ShieldCheckIcon />
 
-// Customized appearance
-<ShieldCheckIcon 
+// Custom size and color
+<ShieldCheckIcon
   size={32}
-  color="green"
+  color="#FFC008"
   strokeWidth={2}
-  className="security-badge"
+  className="my-icon"
 />
-
-// In a security indicator component
-function SecurityStatus({ isVerified }: { isVerified: boolean }) {
-  return (
-    <div className="flex items-center gap-2">
-      <ShieldCheckIcon 
-        color={isVerified ? 'green' : 'gray'}
-        size={20}
-      />
-      <span>{isVerified ? 'Verified' : 'Unverified'}</span>
-    </div>
-  )
-}
 ```
 
-The component uses SVG paths to create a shield outline with an internal checkmark, making it perfect for security badges, verification indicators, and trust symbols.
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class for styling |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'white'` | Stroke color of the icon |
+| `strokeWidth` | `number` | `1.5` | Stroke thickness |

package/src/components/icons/.shield-key-icon.md

@@ -1,40 +1,40 @@
-<!-- source-hash: 5949498f21d0f85f54a13e9c43e2acea -->
-React component that renders an SVG icon depicting a shield with a key lock symbol, commonly used for security and authentication features.
+<!-- source-hash: 9484c05da182a94f606f6051779e664d -->
+A deprecated SVG icon component rendering a shield with a key symbol, intended for security-related UI elements.
 
 ## Key Components
 
-- **ShieldKeyIcon**: Main functional component that renders a customizable shield-lock SVG icon
-- **ShieldKeyIconProps**: TypeScript interface defining component props for styling and sizing
-
-## Props
-
+### `ShieldKeyIconProps`
 | 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 of the SVG paths |
+| `className` | `string` | `''` | CSS class for styling |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'white'` | SVG fill color |
+
+### `ShieldKeyIcon`
+Renders a 24×24 viewBox SVG depicting a shield with a keyhole/lock symbol. Accepts size, color, and className overrides.
+
+> ⚠️ **Deprecated** — This component is deprecated. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { ShieldKeyIcon } from './shield-key-icon'
 
-// Basic usage with defaults
+// Basic usage
 <ShieldKeyIcon />
 
-// Customized icon
-<ShieldKeyIcon 
-  size={32} 
-  color="#3b82f6" 
-  className="hover:opacity-80" 
-/>
-
-// Large security badge
-<ShieldKeyIcon 
-  size={48} 
-  color="currentColor" 
-  className="text-green-500" 
-/>
+// Custom size and color
+<ShieldKeyIcon size={32} color="#FFC008" className="my-icon" />
 ```
 
-The component features a detailed shield outline with an embedded lock mechanism, making it ideal for security dashboards, authentication forms, or privacy-related UI elements. The SVG uses a 24x24 viewBox and scales proportionally based on the size prop.
+## Migration
+
+Replace usages with the equivalent from the `icons-v2-generated` package:
+
+```typescript
+// ❌ Deprecated
+import { ShieldKeyIcon } from './shield-key-icon'
+
+// ✅ Preferred
+import { ShieldKeyIcon } from '@/components/icons-v2-generated'
+```

package/src/components/icons/.shield-lock-icon.md

@@ -1,31 +1,21 @@
-<!-- source-hash: af2d403bf073c7913b2e0cbd7619edf8 -->
-A React SVG icon component that renders a shield with lock symbol, commonly used to represent security, protection, or authentication features.
+<!-- source-hash: 1ae235e89443e1c2f4027c176f1e8209 -->
+Renders a shield-with-lock SVG icon as a React component, used for security-related UI elements.
 
 ## Key Components
 
-- **ShieldLockIconProps** - Interface defining component properties with optional styling customization
-- **ShieldLockIcon** - Main functional component that renders the shield lock SVG with configurable appearance
+- **`ShieldLockIconProps`** — Interface defining optional `className`, `size`, and `color` props
+- **`ShieldLockIcon`** — Deprecated functional component rendering a 65×64 viewBox shield-lock SVG
 
 ## Usage Example
 
 ```typescript
 import { ShieldLockIcon } from './shield-lock-icon'
 
-// Basic usage with defaults (24px, white)
+// Basic usage
 <ShieldLockIcon />
 
-// Customized appearance
-<ShieldLockIcon 
-  size={32} 
-  color="#3b82f6" 
-  className="security-icon hover:opacity-80" 
-/>
-
-// In a security feature card
-<div className="flex items-center gap-2">
-  <ShieldLockIcon size={20} color="green" />
-  <span>Secure Authentication</span>
-</div>
+// Custom size and color
+<ShieldLockIcon size={32} color="#FFC008" className="security-icon" />
 ```
 
-The icon features a shield outline with an internal padlock design, rendered as a stroke-only SVG that scales cleanly at any size. Default styling uses white color at 24px, but all visual properties are customizable through props.
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.

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

@@ -1,39 +1,35 @@
-<!-- source-hash: 9d707a7d9dc13f2e3cd0b3f84c10401e -->
-A React component that renders the official Slack logo as an SVG icon with customizable dimensions and colors. The component creates Slack's distinctive four-colored interlocking shape pattern with proper scaling and styling support.
+<!-- source-hash: ad5657dd0e7123587f93a70c9e7ffdd1 -->
+A deprecated React SVG icon component rendering the Slack logo with four brand colors, supporting optional color injection and standard sizing props.
 
 ## Key Components
 
-- **SlackIcon**: Main functional component that renders the Slack logo SVG
-- **SlackIconProps**: TypeScript interface defining component props including dimensions, CSS classes, and color override options
-- **Color Variables**: Four brand-specific colors (red, blue, green, yellow) that can be overridden with a single `injectedColor` prop
+### `SlackIconProps` Interface
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number \| string` | `24` | SVG width |
+| `height` | `number \| string` | `24` | SVG height |
+| `className` | `string` | `"text-current"` | CSS class for the SVG element |
+| `injectedColor` | `string` | `undefined` | Overrides all four Slack brand colors with a single color |
+
+### `SlackIcon` (Deprecated)
+Renders a 24×24 viewBox SVG of the Slack logo. When `injectedColor` is provided, all four quadrant paths use that color; otherwise the standard Slack brand colors are applied:
+
+- **Red** `#E01E5A` — bottom-left
+- **Blue** `#36C5F0` — top-left
+- **Green** `#2EB67D` — top-right
+- **Yellow** `#ECB22E` — bottom-right
+
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
-import { SlackIcon } from './slack-icon'
-
-// Basic usage with default 24x24 size
-<SlackIcon />
-
-// Custom size and styling
-<SlackIcon 
-  width={32} 
-  height={32} 
-  className="hover:opacity-80" 
-/>
-
-// Override all colors with a single color
-<SlackIcon 
-  width="48" 
-  height="48" 
-  injectedColor="#666666" 
-/>
-
-// Use in a navigation or social media section
-<div className="flex gap-4">
-  <SlackIcon width={20} height={20} className="text-gray-600" />
-  <span>Join our Slack</span>
-</div>
-```
-
-The component maintains the official Slack brand colors by default but allows for monochrome variations when needed. The SVG is optimized for crisp rendering at any size with proper viewBox scaling.
+// Default Slack brand colors
+<SlackIcon width={32} height={32} />
+
+// Single injected color (e.g., monochrome/grayscale)
+<SlackIcon injectedColor="#6B7280" className="opacity-75" />
+
+// Custom sizing with Tailwind class
+<SlackIcon width="1.5rem" height="1.5rem" className="text-gray-500" />
+```