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

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

@@ -1,35 +1,21 @@
-<!-- source-hash: 6adca71f2cb00cc92ab7a39d5b7d2617 -->
-A React component that renders a customizable buildings/cityscape SVG icon with configurable size, color, and styling options.
+<!-- source-hash: 109038e84a0bfe76ae0f7835fe18f9b4 -->
+A deprecated SVG icon component rendering a "buildings" graphic, intended to be replaced by icons from the `icons-v2-generated` library.
 
 ## Key Components
 
-- **BuildingsIcon**: Main functional component that renders an SVG icon
-- **BuildingsIconProps**: TypeScript interface defining component props
-  - `className?`: Optional CSS class string for styling
-  - `size?`: Optional number for width/height (default: 24px)
-  - `color?`: Optional string for fill color (default: 'white')
+- **`BuildingsIconProps`** — Interface defining optional props: `className`, `size`, and `color`
+- **`BuildingsIcon`** — Named export rendering a 64×64 viewBox SVG with sensible defaults (`size: 24`, `color: 'white'`)
+
+> ⚠️ **Deprecated:** This component is marked `@deprecated`. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { BuildingsIcon } from './buildings-icon'
 
-// Basic usage with defaults
+// Default usage
 <BuildingsIcon />
 
-// Customized with different size and color
-<BuildingsIcon 
-  size={32} 
-  color="#007bff" 
-  className="my-buildings-icon" 
-/>
-
-// Large icon with custom styling
-<BuildingsIcon 
-  size={48} 
-  color="currentColor" 
-  className="hover:opacity-80 transition-opacity" 
-/>
-```
-
-The icon uses a 64x64 viewBox and features a detailed path representing multiple buildings in a cityscape silhouette. The SVG is optimized for scalability and maintains crisp edges at any size.
+// Custom size and color
+<BuildingsIcon size={32} color="#FFC008" className="my-icon" />
+```

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

@@ -1,36 +1,40 @@
-<!-- source-hash: 1dae4064f8700d70bce1de919663bf5f -->
-A React component that renders the Capterra logo as a customizable SVG icon with configurable colors and dimensions.
+<!-- source-hash: 8c5e760dd63b3f22a63bd4e07bbd9e30 -->
+Renders the Capterra brand logo as a customizable SVG React component with configurable dimensions and colors.
 
 ## Key Components
 
-- **CapterraIcon**: Main React functional component that renders the Capterra logo
-- **CapterraIconProps**: TypeScript interface defining component props including dimensions and color customization options
+### `CapterraIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number \| string` | `2500` | SVG width |
+| `height` | `number \| string` | `2500` | SVG height |
+| `className` | `string` | `''` | CSS class name |
+| `firstColor` | `string` | `#ff9d28` | Orange shape fill |
+| `secondColor` | `string` | `#68c5ed` | Light blue shape fill |
+| `thirdColor` | `string` | `#044d80` | Dark blue shape fill |
+| `fourthColor` | `string` | `#e54747` | Red shape fill |
+
+### `CapterraIcon` *(deprecated)*
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
+
+A four-path SVG component representing the Capterra logo, rendered within a `320×326` viewBox.
 
 ## Usage Example
 
 ```typescript
 import { CapterraIcon } from './capterra-icon';
 
-// Basic usage with default styling
-<CapterraIcon />
-
-// Custom size and colors
-<CapterraIcon 
-  width={100}
-  height={100}
-  className="logo-icon"
-  firstColor="#ff0000"
-  secondColor="#00ff00"
-  thirdColor="#0000ff"
-  fourthColor="#ffff00"
+// Default size with brand colors
+<CapterraIcon width={48} height={48} />
+
+// Custom class and overridden colors
+<CapterraIcon
+  width={32}
+  height={32}
+  className="my-icon"
+  firstColor="#cccccc"
+  secondColor="#999999"
+  thirdColor="#666666"
+  fourthColor="#333333"
 />
-
-// Responsive sizing
-<CapterraIcon 
-  width="100%"
-  height="auto"
-  className="responsive-logo"
-/>
-```
-
-The component accepts optional props for width/height (defaults to 2500x2500), CSS classes, and four customizable colors that correspond to different sections of the logo. The SVG uses a fixed viewBox and path elements to create the distinctive Capterra geometric design.
+```

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

@@ -0,0 +1,29 @@
+<!-- source-hash: 3b9db58475c0b8158cae2fc18b643457 -->
+A reusable React SVG icon component rendering the Carta brand logo.
+
+## Key Components
+
+- **`CartaIconProps`** — Interface with optional `className` (layout/sizing) and `color` (fill color) props
+- **`CartaIcon`** — Functional component that renders the Carta wordmark as an inline SVG
+
+## Usage Example
+
+```typescript
+import { CartaIcon } from './carta-icon';
+
+// Default usage (white, 24×24)
+<CartaIcon />
+
+// Custom size and color
+<CartaIcon className="w-10 h-10" color="#000000" />
+
+// Using a CSS variable
+<CartaIcon color="var(--brand-primary)" />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `'w-6 h-6'` | Tailwind/CSS classes for sizing |
+| `color` | `string` | `var(--ods-system-greys-white)` | SVG fill color |

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

@@ -0,0 +1,26 @@
+<!-- source-hash: cd904f644e5e8133b8d05916a705a33c -->
+SVG icon component rendering the ClickUp brand logo with customizable dimensions and styling.
+
+## Key Components
+
+**`ClickUpIconProps`** — Interface defining optional props:
+- `width` — Icon width (default: `24`)
+- `height` — Icon height (default: `24`)
+- `className` — Additional CSS classes (default: `''`)
+
+**`ClickUpIcon`** — Named export rendering a two-path SVG with ClickUp's signature gradient colors (purple-to-cyan bottom arc, pink-to-yellow top chevron).
+
+## Usage Example
+
+```typescript
+import { ClickUpIcon } from './clickup-icon'
+
+// Default 24×24
+<ClickUpIcon />
+
+// Custom size with Tailwind class
+<ClickUpIcon width={40} height={40} className="opacity-80" />
+
+// String-based responsive size
+<ClickUpIcon width="100%" height="auto" />
+```

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

@@ -1,35 +1,28 @@
-<!-- source-hash: b2f65fcfb2b7a9de47a6b9d7387abd3b -->
-A React component that renders a command line/terminal icon using SVG, featuring a bordered rectangle with a greater-than symbol representing a command prompt.
+<!-- source-hash: 1fbbb3094bf6a0d9979d8bc5c325eb0c -->
+A deprecated React SVG icon component rendering a command/terminal prompt symbol (`>`) inside a rounded rectangle.
 
 ## Key Components
 
-- **CmdIcon**: Main React functional component that renders the terminal icon
-- **CmdIconProps**: TypeScript interface defining the component's props:
-  - `size`: Controls icon dimensions (default: 16px)
-  - `className`: CSS class for styling
-  - `color`: Icon color (default: 'white')
+### `CmdIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number` | `16` | Width and height of the SVG in pixels |
+| `className` | `string` | `''` | Additional CSS classes |
+| `color` | `string` | `'white'` | Stroke and fill color |
+
+### `CmdIcon`
+A functional component that renders a square SVG icon with a `>` terminal prompt character centered inside.
 
 ## Usage Example
 
 ```typescript
 import { CmdIcon } from './cmd-icon'
 
-// Basic usage with defaults
+// Default usage
 <CmdIcon />
 
-// Customized icon
-<CmdIcon 
-  size={24} 
-  color="#000000" 
-  className="terminal-icon" 
-/>
-
-// Large blue icon for headers
-<CmdIcon 
-  size={32} 
-  color="#0066cc" 
-  className="mb-2" 
-/>
+// Custom size and color
+<CmdIcon size={24} color="#FFC008" className="my-icon" />
 ```
 
-The component creates a 24x24 viewBox SVG that scales to the specified size, with a stroked rectangle border and a monospace ">" character centered inside to represent a command prompt interface.
+> **⚠️ Deprecated:** This component is deprecated. Use icons from `icons-v2-generated` instead.

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

@@ -1,36 +1,28 @@
-<!-- source-hash: 913698fd6ed595ccda5237076b87706e -->
-A React functional component that renders an SVG icon depicting two overlapping coins, commonly used to represent currency, payments, or financial features.
+<!-- source-hash: d41890fd509110d808a7f9d3051865e7 -->
+A deprecated React SVG icon component rendering a "coins" graphic with two overlapping circles.
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Key Components
 
-- **CoinsIcon** - Main React component that renders the SVG icon
-- **CoinsIconProps** - TypeScript interface defining component props:
-  - `color` - SVG stroke color (default: 'white')
-  - `className` - CSS class for styling
-  - `width` - Icon width in pixels (default: 20)
-  - `height` - Icon height in pixels (default: 20)
+- **`CoinsIcon`** — Functional React component rendering an inline SVG coins icon
+- **`CoinsIconProps`** — Interface for component props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Stroke color of the SVG paths |
+| `className` | `string` | `''` | CSS class for the SVG element |
+| `width` | `number` | `20` | SVG width in pixels |
+| `height` | `number` | `20` | SVG height in pixels |
 
 ## Usage Example
 
 ```typescript
 import { CoinsIcon } from './coins-icon';
 
-// Basic usage with defaults
+// Basic usage
 <CoinsIcon />
 
-// Customized appearance
-<CoinsIcon 
-  color="#3B82F6" 
-  width={24} 
-  height={24}
-  className="hover:opacity-80 transition-opacity"
-/>
-
-// In a button or navigation element
-<button className="flex items-center gap-2">
-  <CoinsIcon color="#10B981" width={16} height={16} />
-  Wallet Balance
-</button>
-```
-
-The icon features two circular coins with decorative curved elements, using stroke-based rendering for clean scalability. All visual properties are customizable through props, making it suitable for various UI contexts like navigation menus, dashboards, or payment interfaces.
+// Custom size and color
+<CoinsIcon width={32} height={32} color="#FFC008" className="my-icon" />
+```

package/src/components/icons/.community-hub-icon.md

@@ -1,40 +1,34 @@
-<!-- source-hash: b397260ac3f16270484937cffbcef430 -->
-A React component that renders a customizable community hub icon as an SVG, featuring interconnected people and connection nodes representing a collaborative community network.
+<!-- source-hash: 2b0478ef9a9f51c5289bd389af0b3e00 -->
+A deprecated SVG icon component representing a "Community Hub" concept, rendered as a group/people symbol with configurable dimensions and color.
 
 ## Key Components
 
-**CommunityHubIcon**: Main functional component that accepts customization props
-- `color` (optional): Fill color for the icon paths (default: 'white')
-- `className` (optional): CSS classes for styling and positioning
-- `width` (optional): Icon width in pixels (default: 19)
-- `height` (optional): Icon height in pixels (default: 16)
+### `CommunityHubIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | SVG fill color |
+| `className` | `string` | `''` | Additional CSS classes |
+| `width` | `number` | `19` | Icon width in pixels |
+| `height` | `number` | `16` | Icon height in pixels |
 
-**SVG Structure**: Two-path design representing community connectivity
-- Connection nodes and network links
-- Central figure with surrounding community elements
-- Scalable vector format with 19x16 viewBox
+### `CommunityHubIcon`
+A functional React component that renders a 19×16 SVG icon. Marked as **deprecated** — use the `icons-v2-generated` package instead.
 
 ## Usage Example
 
 ```typescript
 import { CommunityHubIcon } from './community-hub-icon';
 
-// Basic usage with defaults
+// Default usage
 <CommunityHubIcon />
 
-// Customized appearance
-<CommunityHubIcon 
-  color="#3B82F6" 
-  width={24} 
-  height={20} 
-  className="hover:opacity-75 transition-opacity" 
+// Custom color and size
+<CommunityHubIcon
+  color="#FFC008"
+  width={24}
+  height={20}
+  className="mr-2"
 />
-
-// Navigation or button integration
-<button className="flex items-center gap-2">
-  <CommunityHubIcon color="currentColor" />
-  <span>Community Hub</span>
-</button>
 ```
 
-The icon is optimized for navigation menus, buttons, and UI elements where community or social features need visual representation.
+> **⚠️ Deprecated:** This component is no longer maintained. Migrate to the equivalent icon from `icons-v2-generated` to ensure compatibility with future updates.

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

@@ -1,34 +1,37 @@
-<!-- source-hash: 50953a054a834aedf20be0563d242e12 -->
-A React component that renders an SVG community icon representing people/users, commonly used for community-related features and navigation.
+<!-- source-hash: 0eb0b94c0b47c6a49bda27ce9d9b4423 -->
+SVG icon component representing a community/group of people, used in the Flamingo/OpenFrame UI. Marked as deprecated in favor of the newer `icons-v2-generated` icon system.
 
 ## Key Components
 
-- **CommunityIcon**: React functional component that renders a scalable SVG icon
-- **CommunityIconProps**: TypeScript interface defining customizable properties
-- **SVG Path Elements**: Two path elements creating a community/users icon design
+### `CommunityIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Fill color of the SVG paths |
+| `className` | `string` | `""` | CSS class for styling |
+| `width` | `number` | `24` | SVG width in pixels |
+| `height` | `number` | `24` | SVG height in pixels |
+
+### `CommunityIcon`
+A functional React component rendering a 24×24 SVG icon depicting two people figures, suitable for community, users, or group-related UI elements.
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { CommunityIcon } from './community-icon';
 
-// Basic usage with defaults
+// Basic usage
 <CommunityIcon />
 
-// Customized appearance
-<CommunityIcon 
-  width={32} 
-  height={32} 
-  color="#3B82F6" 
-  className="hover:opacity-80" 
-/>
-
-// Large icon for headers
-<CommunityIcon 
-  width={48} 
-  height={48} 
-  color="currentColor" 
+// Custom color and size
+<CommunityIcon
+  color="#FFC008"
+  width={32}
+  height={32}
+  className="my-icon"
 />
-```
 
-The component accepts optional props for `width` (24px default), `height` (24px default), `color` (white default), and `className` for additional CSS styling. The SVG uses a 24x24 viewBox and scales proportionally based on the provided dimensions.
+// Preferred replacement (use instead)
+import { CommunityIcon } from '@/components/icons-v2-generated';
+```

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

@@ -1,33 +1,46 @@
-<!-- source-hash: 97f9693574b195aa233d46991ddc4449 -->
-A React functional component that renders a customizable SVG icon representing a comparison or balance scale symbol.
+<!-- source-hash: 3beb2e476cec9cf75bd1175ab677f682 -->
+A deprecated SVG icon component that renders a "compare" (scales/balance) symbol with configurable dimensions and color.
 
 ## Key Components
 
-- **CompareIcon**: Main React component that renders an SVG icon with a central vertical line and two balanced scales
-- **CompareIconProps**: TypeScript interface defining component props including color, className, width, and height
-- Default props: 24x24 dimensions, white fill color, empty className
+### `CompareIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Fill color for the SVG paths |
+| `className` | `string` | `''` | CSS class for styling |
+| `width` | `number` | `24` | Icon width in pixels |
+| `height` | `number` | `24` | Icon height in pixels |
+
+### `CompareIcon`
+A functional React component rendering a 24×24 viewBox SVG depicting a balance/scales icon (a center pin with two weighted pans).
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { CompareIcon } from './compare-icon';
 
-// Basic usage with defaults
+// Default usage
 <CompareIcon />
 
-// Customized with different props
-<CompareIcon 
-  width={32} 
-  height={32} 
-  color="#3b82f6" 
-  className="hover:opacity-80" 
+// Custom color and size
+<CompareIcon
+  color="#FFC008"
+  width={32}
+  height={32}
+  className="compare-icon"
 />
-
-// In a button or interactive element
-<button className="flex items-center gap-2">
-  <CompareIcon width={16} height={16} color="currentColor" />
-  Compare Items
-</button>
 ```
 
-The SVG uses a 24x24 viewBox and consists of two main path elements: a central vertical line with circular top element, and two symmetrical scale/balance icons on either side. All visual properties are customizable through props while maintaining the icon's aspect ratio and visual consistency.
+## Migration
+
+Replace usages with the equivalent from the new icon library:
+
+```typescript
+// ❌ Deprecated
+import { CompareIcon } from './compare-icon';
+
+// ✅ Preferred
+import { CompareIcon } from '@/icons-v2-generated';
+```

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

@@ -1,31 +1,45 @@
-<!-- source-hash: 070c456de456bf9dfa8496f4048b5f3e -->
-A reusable React SVG icon component that renders a copy/duplicate symbol with customizable styling properties.
+<!-- source-hash: 86dcb688fa020206e75a40785028f90d -->
+A deprecated React SVG icon component that renders a copy/clipboard icon with configurable size, color, and CSS class.
 
 ## Key Components
 
-- **CopyIconProps**: Interface defining optional props for className, size, and color customization
-- **CopyIcon**: Main component that renders an SVG copy icon with two overlapping rectangles representing the copy action
+### `CopyIconProps` *(deprecated)*
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class for styling |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'#888888'` | SVG fill color |
+
+### `CopyIcon` *(deprecated)*
+A functional React component rendering a 24×24 viewBox SVG copy icon composed of two paths — a dashed border representing the background document and a solid rectangle representing the foreground page.
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { CopyIcon } from './copy-icon';
 
-// Basic usage with default 24px size and gray color
+// Default usage
 <CopyIcon />
 
-// Customized with larger size and blue color
-<CopyIcon 
-  size={32} 
-  color="#0066cc" 
-  className="copy-button-icon" 
-/>
+// Custom size and color
+<CopyIcon size={16} color="#FFC008" className="ml-2 cursor-pointer" />
 
-// In a copy button component
+// With click handler wrapper
 <button onClick={handleCopy}>
-  <CopyIcon size={16} color="currentColor" />
-  Copy to clipboard
+  <CopyIcon size={20} color="#ffffff" />
 </button>
 ```
 
-The component uses a 24x24 viewBox and scales proportionally based on the size prop. The SVG paths create a visual representation of two overlapping document rectangles, universally recognized as the copy/duplicate icon.
+## Migration
+
+Replace usages with the equivalent from the new icon library:
+
+```typescript
+// ❌ Deprecated
+import { CopyIcon } from './copy-icon';
+
+// ✅ Preferred
+import { CopyIcon } from './icons-v2-generated';
+```

package/src/components/icons/.custom-external-link-icon.md

@@ -1,31 +1,33 @@
-<!-- source-hash: 34f073cc43b7d4d3bfcc7171b8930746 -->
-A React SVG component that renders a customizable external link icon, commonly used to indicate links that open in new windows or navigate to external websites.
+<!-- source-hash: 70a723ece612c0bff275d816a788d029 -->
+A deprecated SVG icon component that renders an external link symbol with a customizable appearance.
 
 ## Key Components
 
-- **CustomExternalLinkIconProps**: Interface defining the component's props including styling and sizing options
-- **CustomExternalLinkIcon**: Functional component that renders an SVG external link icon with customizable properties
+**`CustomExternalLinkIconProps`** — Interface defining optional props:
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | CSS class for the SVG element |
+| `fill` | `string` | `"#888888"` | Icon fill color |
+| `width` | `number` | `21` | SVG width in pixels |
+| `height` | `number` | `22` | SVG height in pixels |
+
+**`CustomExternalLinkIcon`** — ⚠️ Deprecated SVG component. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { CustomExternalLinkIcon } from './custom-external-link-icon';
 
-// Basic usage with defaults
+// Default rendering
 <CustomExternalLinkIcon />
 
-// Customized styling
-<CustomExternalLinkIcon 
-  className="external-link-icon" 
-  fill="#007bff" 
-  width={24} 
-  height={24} 
+// Custom color and size
+<CustomExternalLinkIcon
+  fill="#0066CC"
+  width={16}
+  height={17}
+  className="ml-1 inline-block"
 />
-
-// In a link component
-<a href="https://example.com" target="_blank">
-  Visit site <CustomExternalLinkIcon width={16} height={16} />
-</a>
 ```
 
-The component accepts standard SVG props through prop spreading and provides sensible defaults: gray fill color (#888888) and 21x22px dimensions. The SVG paths create a classic external link symbol with an arrow pointing diagonally outward from a square.
+> ⚠️ **Deprecated:** This component is marked for removal. Migrate to the equivalent icon from `icons-v2-generated` for future-proof usage.

package/src/components/icons/.custom-fork-icon.md

@@ -1,32 +1,43 @@
-<!-- source-hash: 214ae71bb3f06bbfc875d11a9f3dcff5 -->
-A React component that renders a customizable fork icon SVG, commonly used to represent Git repository forks or branching actions in development interfaces.
+<!-- source-hash: 475c6a42198bc7f5ceb1959eb96e3d49 -->
+A deprecated custom SVG fork icon React component with configurable dimensions, color fill, and className support.
 
 ## Key Components
 
-- **CustomForkIconProps**: TypeScript interface defining component props including styling and sizing options
-- **CustomForkIcon**: Functional component that renders an SVG fork icon with customizable appearance
+### `CustomForkIconProps`
+Interface defining the component's optional props:
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | CSS class name |
+| `fill` | `string` | `"#888888"` | SVG fill color |
+| `width` | `number` | `24` | Icon width in pixels |
+| `height` | `number` | `24` | Icon height in pixels |
+
+### `CustomForkIcon` ⚠️ Deprecated
+Renders a 24×24 viewBox SVG depicting a git-fork shape with three circular nodes and connecting paths. Additional SVG props are spread onto the root `<svg>` element.
+
+> **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
-import { CustomForkIcon } from './custom-fork-icon';
-
-// Basic usage with defaults
+// Basic usage
 <CustomForkIcon />
 
-// Customized appearance
-<CustomForkIcon 
-  className="hover:opacity-80 cursor-pointer"
-  fill="#2563eb"
-  width={32}
-  height={32}
-/>
-
-// In a button or interactive element
-<button className="flex items-center gap-2">
-  <CustomForkIcon fill="currentColor" width={16} height={16} />
-  Fork Repository
-</button>
+// Custom color and size
+<CustomForkIcon fill="#FFC008" width={32} height={32} />
+
+// With className for Tailwind styling
+<CustomForkIcon className="text-gray-500 hover:text-white" fill="#ffffff" />
 ```
 
-The icon features a fork-like branching design with three circular nodes connected by paths, representing the concept of code forking. It defaults to a neutral gray color (#888888) and 24x24 pixel dimensions, but all visual properties can be customized through props. The component spreads additional props to the SVG element for maximum flexibility.
+## Migration
+
+Replace usages with the equivalent from the generated icon library:
+
+```typescript
+// ❌ Deprecated
+import { CustomForkIcon } from './custom-fork-icon'
+
+// ✅ Preferred
+import { ForkIcon } from '@/components/icons-v2-generated'
+```