@factorialco/f0-react-native 0.28.1 → 0.30.0

package/src/components/experimental/Lists/DataList/ItemContainer.tsx

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from "react"
 import { View, Text } from "react-native"
 
 import { cn } from "../../../../lib/utils"
-import { Icon, IconType } from "../../../Icon"
+import { F0Icon, type IconType } from "../../../primitives/F0Icon"
 
 import { CopyAction } from "./actions/CopyAction"
 import { GenericAction } from "./actions/GenericAction"
@@ -34,7 +34,7 @@ export const ItemContainer = (props: ItemContainerProps) => {
           (typeof LeftIcon === "function" ? (
             LeftIcon({})
           ) : (
-            <Icon icon={LeftIcon} size="md" />
+            <F0Icon icon={LeftIcon} size="md" />
           ))}
         <Text className="line-clamp-5 text-left text-f0-foreground">
           {text}

package/src/components/experimental/Lists/DataList/actions/CopyAction.tsx

@@ -5,7 +5,7 @@ import { Pressable, View } from "react-native"
 import { CopyActionType } from ".."
 import { CheckCircle, LayersFront } from "../../../../../icons/app"
 import { cn } from "../../../../../lib/utils"
-import { Icon } from "../../../../Icon"
+import { F0Icon } from "../../../../primitives/F0Icon"
 
 const COPIED_SHOWN_MS = 750
 
@@ -47,24 +47,21 @@ export const CopyAction = ({ text, children }: CopyActionProps) => {
       <View className="flex flex-row items-center gap-1.5">{children}</View>
       <View className="flex">
         {!copied && (
-          <Icon
+          <F0Icon
             icon={LayersFront}
             size="md"
             aria-hidden={true}
-            className={cn(
-              "col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
-            )}
+            color="bold"
+            className="col-start-1 col-end-2 row-start-1 row-end-2"
           />
         )}
         {copied && (
-          <Icon
+          <F0Icon
             icon={CheckCircle}
             size="md"
             aria-hidden={true}
-            className={cn(
-              "col-start-1 col-end-2 row-start-1 row-end-2",
-              "text-f0-icon-positive"
-            )}
+            color="positive"
+            className="col-start-1 col-end-2 row-start-1 row-end-2"
           />
         )}
       </View>

package/src/components/experimental/Lists/DataList/actions/GenericAction.tsx

@@ -4,7 +4,7 @@ import { Pressable, View } from "react-native"
 import { GenericActionType } from ".."
 import { ChevronRight } from "../../../../../icons/app"
 import { cn } from "../../../../../lib/utils"
-import { Icon } from "../../../../Icon"
+import { F0Icon } from "../../../../primitives/F0Icon"
 
 export type GenericActionProps = {
   children: ReactNode
@@ -24,7 +24,7 @@ export const GenericAction = memo(
         )}
       >
         <View className="flex flex-row items-center gap-1.5">{children}</View>
-        <Icon
+        <F0Icon
           aria-hidden={true}
           icon={ChevronRight}
           size="md"

package/src/components/experimental/Lists/DataList/index.tsx

@@ -5,7 +5,7 @@ import { cn } from "../../../../lib/utils"
 import { CompanyAvatar } from "../../../Avatars/CompanyAvatar"
 import { PersonAvatar } from "../../../Avatars/PersonAvatar"
 import { TeamAvatar } from "../../../Avatars/TeamAvatar"
-import { IconType } from "../../../Icon"
+import { type IconType } from "../../../primitives/F0Icon"
 import { DotTag, DotTagProps } from "../../../Tags/DotTag"
 
 import { ItemContainer } from "./ItemContainer"

package/src/components/experimental/Lists/DetailsItem/__snapshots__/index.spec.tsx.snap

@@ -101,7 +101,7 @@ exports[`DetailsItem Snapshot type company 1`] = `
               aria-hidden={true}
               bbHeight="100%"
               bbWidth="100%"
-              className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+              className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
               fill="none"
               focusable={false}
               meetOrSlice={0}
@@ -343,7 +343,7 @@ exports[`DetailsItem Snapshot type item 1`] = `
               aria-hidden={true}
               bbHeight="100%"
               bbWidth="100%"
-              className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+              className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
               fill="none"
               focusable={false}
               meetOrSlice={0}
@@ -519,7 +519,7 @@ exports[`DetailsItem Snapshot type person 1`] = `
               aria-hidden={true}
               bbHeight="100%"
               bbWidth="100%"
-              className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+              className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
               fill="none"
               focusable={false}
               meetOrSlice={0}
@@ -695,7 +695,7 @@ exports[`DetailsItem Snapshot type team 1`] = `
               aria-hidden={true}
               bbHeight="100%"
               bbWidth="100%"
-              className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+              className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
               fill="none"
               focusable={false}
               meetOrSlice={0}

package/src/components/experimental/Lists/DetailsItemsList/__snapshots__/index.spec.tsx.snap

@@ -79,7 +79,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                   aria-hidden={true}
                   bbHeight="100%"
                   bbWidth="100%"
-                  className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+                  className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
                   fill="none"
                   focusable={false}
                   meetOrSlice={0}

package/src/components/exports.ts

@@ -5,7 +5,7 @@ export * from "./Badge"
 export * from "./Button"
 export * from "./Counter"
 export * from "./ExampleComponent"
-export * from "./Icon"
+export { Icon, type IconProps } from "./Icon"
 export * from "./Navigation/PageHeader"
 export * from "./OneChip"
 export * from "./OnePreset"
@@ -17,3 +17,4 @@ export * from "./experimental/Lists/DetailsItemsList"
 
 // Export primitives
 export * from "./primitives/F0Text"
+export * from "./primitives/F0Icon"

package/src/components/primitives/F0Icon/F0Icon.md

@@ -0,0 +1,187 @@
+# F0Icon
+
+Icon component for rendering SVG icons with consistent sizing and semantic colors from the F0 Design System.
+
+## Overview
+
+F0Icon is an atomic component that wraps SVG icon components with automatic UniWind interop, standardized sizing variants, and semantic icon colors. It follows the same pattern as F0Text: a `color` prop maps to design system tokens, with `className` available as an escape hatch.
+
+## Architecture
+
+- **Pattern:** Props API (Atomic Component)
+- **Category:** Primitive Component
+- **Location:** `src/components/primitives/F0Icon/`
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import { F0Icon } from "@factorialco/f0-react-native"
+import { Archive } from "@factorialco/f0-react-native/icons/app"
+import { Home } from "@factorialco/f0-react-native/icons/modules"
+
+<F0Icon icon={Archive} />
+
+<F0Icon icon={Home} size="lg" />
+
+<F0Icon icon={Archive} color="critical" />
+
+<F0Icon icon={Archive} size="sm" color="positive" testID="archive-icon" />
+```
+
+## Props
+
+### `icon` (required)
+
+- **Type:** `IconType`
+- **Description:** SVG icon component to render (from `icons/` directory)
+
+<!-- prettier-ignore -->
+```tsx
+import { Archive } from "@factorialco/f0-react-native/icons/app"
+<F0Icon icon={Archive} />
+```
+
+### `size`
+
+- **Type:** `'xl' | 'lg' | 'md' | 'sm' | 'xs'`
+- **Default:** `'md'`
+- **Description:** Size variant for the icon
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} size="xl" />  // 32x32px
+<F0Icon icon={Archive} size="lg" />  // 24x24px
+<F0Icon icon={Archive} size="md" />  // 20x20px (default)
+<F0Icon icon={Archive} size="sm" />  // 16x16px
+<F0Icon icon={Archive} size="xs" />  // 12x12px
+```
+
+### `color`
+
+- **Type:** `IconColor` (see below)
+- **Default:** none (no color class applied; icon inherits from parent)
+- **Description:** Semantic icon color from the F0 design system. Maps to `f0-icon-*` tokens.
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} color="default" />
+<F0Icon icon={Archive} color="critical" />
+<F0Icon icon={Archive} color="positive" />
+<F0Icon icon={Archive} color="info" />
+<F0Icon icon={Archive} color="warning" />
+<F0Icon icon={Archive} color="accent" />
+```
+
+### `testID`
+
+- **Type:** `string`
+- **Description:** Test identifier for testing library
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} testID="my-icon" />
+```
+
+### `className`
+
+- **Type:** `string`
+- **Description:** Tailwind classes for custom styling. Use as an escape hatch when `color` doesn't cover the need (e.g. layout adjustments, one-off colors).
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} className="-ml-0.5" />
+<F0Icon icon={Star} className="text-yellow-500" />
+```
+
+### Other Props
+
+F0Icon accepts all SVG props from `react-native-svg` except `style` (use `color` or `className` instead).
+
+## Size Variants
+
+| Variant | Width/Height   | Stroke Width | Use Case                           |
+| ------- | -------------- | ------------ | ---------------------------------- |
+| `xl`    | 32px (w-8 h-8) | stroke-xl    | Large feature icons, hero sections |
+| `lg`    | 24px (w-6 h-6) | stroke-lg    | Primary buttons, major actions     |
+| `md`    | 20px (w-5 h-5) | stroke-md    | Default size, most UI elements     |
+| `sm`    | 16px (w-4 h-4) | stroke-sm    | Secondary buttons, compact UI      |
+| `xs`    | 12px (w-3 h-3) | stroke-xs    | Inline icons, dense layouts        |
+
+## Color Variants
+
+Derived from `f0-icon-*` tokens in `src/styles/theme.css`. Sync is enforced by `F0Icon.tokens.spec.ts`.
+
+| Color                 | Token                              | Use Case                  |
+| --------------------- | ---------------------------------- | ------------------------- |
+| `default`             | `text-f0-icon`                     | Standard icon color       |
+| `secondary`           | `text-f0-icon-secondary`           | Muted/secondary icons     |
+| `inverse`             | `text-f0-icon-inverse`             | Icons on dark backgrounds |
+| `bold`                | `text-f0-icon-bold`                | High emphasis icons       |
+| `critical`            | `text-f0-icon-critical`            | Error/destructive         |
+| `critical-bold`       | `text-f0-icon-critical-bold`       | Bold critical emphasis    |
+| `accent`              | `text-f0-icon-accent`              | Brand accent              |
+| `info`                | `text-f0-icon-info`                | Informational             |
+| `warning`             | `text-f0-icon-warning`             | Warning states            |
+| `positive`            | `text-f0-icon-positive`            | Success/positive          |
+| `promote`             | `text-f0-icon-promote`             | Promotional highlights    |
+| `selected`            | `text-f0-icon-selected`            | Selected state            |
+| `selected-hover`      | `text-f0-icon-selected-hover`      | Selected hover state      |
+| `mood-super-negative` | `text-f0-icon-mood-super-negative` | Mood: very negative       |
+| `mood-negative`       | `text-f0-icon-mood-negative`       | Mood: negative            |
+| `mood-neutral`        | `text-f0-icon-mood-neutral`        | Mood: neutral             |
+| `mood-positive`       | `text-f0-icon-mood-positive`       | Mood: positive            |
+| `mood-super-positive` | `text-f0-icon-mood-super-positive` | Mood: very positive       |
+
+## Implementation Details
+
+### UniWind Interop
+
+F0Icon automatically applies UniWind interop to icon components using `withUniwind()`. Icons are cached in a `WeakSet` to ensure the wrapper is only applied once per icon type.
+
+### Performance
+
+- Wrapped in `React.memo` to prevent unnecessary re-renders
+- `useMemo` for className generation
+- Icon interop caching via `WeakSet`
+
+### TypeScript
+
+Style prop is blocked at compile-time to enforce `color`/`className` usage:
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} color="critical" />
+
+// TypeScript error - style not allowed
+<F0Icon icon={Archive} style={{ color: 'red' }} />
+```
+
+### Token Sync
+
+`ICON_COLORS` in `F0Icon.types.ts` is kept in sync with `f0-icon-*` tokens from `theme.css` by a CI test (`F0Icon.tokens.spec.ts`). Adding or removing a token in theme.css without updating `ICON_COLORS` will fail the test.
+
+## File Structure
+
+```
+src/components/primitives/F0Icon/
+├── index.ts                       # Barrel exports
+├── F0Icon.tsx                     # Component implementation
+├── F0Icon.types.ts                # TypeScript type definitions (ICON_COLORS, IconColor)
+├── F0Icon.styles.ts               # tailwind-variants configuration (size + color)
+├── F0Icon.md                      # This documentation
+└── __tests__/
+    ├── F0Icon.spec.tsx            # Component tests
+    └── F0Icon.tokens.spec.ts     # Token sync test (theme.css ↔ ICON_COLORS)
+```
+
+## Related Components
+
+- **F0Text** - Text primitive with semantic `color` prop (foreground tokens)
+- **Button** - Uses F0Icon for icon slots
+- **Badge** - Can include F0Icon
+
+## References
+
+- Design tokens: `src/styles/theme.css`
+- Icon source: `src/icons/`

package/src/components/primitives/F0Icon/F0Icon.styles.ts

@@ -0,0 +1,43 @@
+import { tv } from "tailwind-variants"
+
+/**
+ * F0Icon tailwind-variants configuration
+ * Size and color variants from the F0 design system
+ */
+export const iconVariants = tv({
+  base: "shrink-0",
+
+  variants: {
+    size: {
+      xl: "w-8 h-8 stroke-xl",
+      lg: "w-6 h-6 stroke-lg",
+      md: "w-5 h-5 stroke-md",
+      sm: "w-4 h-4 stroke-sm",
+      xs: "w-3 h-3 stroke-xs",
+    },
+    color: {
+      default: "text-f0-icon",
+      secondary: "text-f0-icon-secondary",
+      inverse: "text-f0-icon-inverse",
+      bold: "text-f0-icon-bold",
+      critical: "text-f0-icon-critical",
+      "critical-bold": "text-f0-icon-critical-bold",
+      accent: "text-f0-icon-accent",
+      info: "text-f0-icon-info",
+      warning: "text-f0-icon-warning",
+      positive: "text-f0-icon-positive",
+      promote: "text-f0-icon-promote",
+      selected: "text-f0-icon-selected",
+      "selected-hover": "text-f0-icon-selected-hover",
+      "mood-super-negative": "text-f0-icon-mood-super-negative",
+      "mood-negative": "text-f0-icon-mood-negative",
+      "mood-neutral": "text-f0-icon-mood-neutral",
+      "mood-positive": "text-f0-icon-mood-positive",
+      "mood-super-positive": "text-f0-icon-mood-super-positive",
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+  },
+})

package/src/components/primitives/F0Icon/F0Icon.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from "react"
+import type { Svg } from "react-native-svg"
+import { withUniwind } from "uniwind"
+
+import { cn } from "../../../lib/utils"
+
+import { iconVariants } from "./F0Icon.styles"
+import type { F0IconProps, IconType } from "./F0Icon.types"
+
+// Cache original icon -> wrapped icon so withUniwind is only applied once per icon type
+const interopCache = new WeakMap<IconType, IconType>()
+
+/**
+ * Applies UniWind interop to an icon component
+ * Ensures withUniwind is only applied once per icon type
+ * @internal
+ */
+export function applyIconInterop(icon: IconType): IconType {
+  let wrapped = interopCache.get(icon)
+  if (!wrapped) {
+    wrapped = withUniwind(icon) as IconType
+    interopCache.set(icon, wrapped)
+  }
+  return wrapped
+}
+
+/**
+ * F0Icon - Icon component for the F0 Design System
+ *
+ * Renders SVG icons with consistent sizing and semantic colors.
+ * Icons are automatically wrapped with UniWind for className support.
+ *
+ * @example
+ * import { Archive } from '@/icons/app';
+ *
+ * <F0Icon icon={Archive} size="lg" />
+ * <F0Icon icon={Archive} color="critical" />
+ * <F0Icon icon={Archive} size="sm" color="positive" />
+ */
+const F0Icon = React.memo(
+  React.forwardRef<Svg, F0IconProps>(
+    (
+      { size = "md", color, icon, testID, className: customClassName, ...rest },
+      ref
+    ) => {
+      const IconComponent = useMemo(
+        () => (icon ? applyIconInterop(icon) : null),
+        [icon]
+      )
+
+      const className = useMemo(
+        () => cn(iconVariants({ size, color }), customClassName),
+        [size, color, customClassName]
+      )
+
+      // Early return if no icon provided (after all hooks)
+      if (!icon || !IconComponent) return null
+
+      return (
+        <IconComponent
+          ref={ref}
+          className={className}
+          testID={testID}
+          {...rest}
+        />
+      )
+    }
+  )
+)
+
+F0Icon.displayName = "F0Icon"
+
+export default F0Icon

package/src/components/primitives/F0Icon/F0Icon.types.ts

@@ -0,0 +1,77 @@
+import type { ForwardRefExoticComponent, RefAttributes } from "react"
+import type { SvgProps } from "react-native-svg"
+import type { Svg } from "react-native-svg"
+import type { VariantProps } from "tailwind-variants"
+
+import type { iconVariants } from "./F0Icon.styles"
+
+/**
+ * Icon component type - forward ref to SVG component with className support
+ */
+export type IconType = ForwardRefExoticComponent<
+  SvgProps &
+    RefAttributes<Svg> & {
+      className?: string
+    }
+>
+
+/**
+ * Icon color variants derived from f0-icon-* tokens in src/styles/theme.css
+ * Sync is enforced by F0Icon.tokens.spec.ts
+ */
+export const ICON_COLORS = [
+  "default",
+  "secondary",
+  "inverse",
+  "bold",
+  "critical",
+  "critical-bold",
+  "accent",
+  "info",
+  "warning",
+  "positive",
+  "promote",
+  "selected",
+  "selected-hover",
+  "mood-super-negative",
+  "mood-negative",
+  "mood-neutral",
+  "mood-positive",
+  "mood-super-positive",
+] as const
+
+export type IconColor = (typeof ICON_COLORS)[number]
+
+/**
+ * Public F0Icon props
+ * Supports semantic color via `color` prop, with `className` as escape hatch.
+ */
+export interface F0IconProps extends Omit<SvgProps, "style"> {
+  /**
+   * Tailwind className for custom styling or color overrides.
+   * Prefer the `color` prop for semantic icon colors.
+   */
+  className?: string
+
+  /**
+   * Semantic icon color from the F0 design system
+   * Maps to f0-icon-* tokens (e.g. color="critical" -> text-f0-icon-critical)
+   */
+  color?: IconColor
+
+  /**
+   * Icon component to render (from icons directory)
+   */
+  icon: IconType
+
+  /**
+   * Icon size variant
+   * @default 'md'
+   */
+  size?: VariantProps<typeof iconVariants>["size"]
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string
+}

package/src/components/primitives/F0Icon/__tests__/F0Icon.spec.tsx

@@ -0,0 +1,131 @@
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { Archive } from "../../../../icons/app"
+import { Home } from "../../../../icons/modules"
+import { applyIconInterop } from "../F0Icon"
+import F0Icon from "../F0Icon"
+
+describe("F0Icon", () => {
+  it("renders correctly with an app icon", () => {
+    const { getByTestId } = render(<F0Icon icon={Archive} testID="icon" />)
+    expect(getByTestId("icon")).toBeTruthy()
+  })
+
+  it("renders correctly with a module icon", () => {
+    const { getByTestId } = render(<F0Icon icon={Home} testID="icon" />)
+    expect(getByTestId("icon")).toBeTruthy()
+  })
+
+  it("applies the correct size variant", () => {
+    const { getByTestId } = render(
+      <F0Icon icon={Archive} size="lg" testID="icon" />
+    )
+    expect(getByTestId("icon")).toBeTruthy()
+  })
+
+  it("returns null when no icon is provided", () => {
+    // @ts-expect-error - Testing runtime behavior
+    const { queryByTestId } = render(<F0Icon testID="icon" />)
+    expect(queryByTestId("icon")).toBeNull()
+  })
+
+  it("applies default size when size prop is not provided", () => {
+    const { getByTestId } = render(<F0Icon icon={Archive} testID="icon" />)
+    expect(getByTestId("icon")).toBeTruthy()
+  })
+
+  it("forwards ref correctly", () => {
+    const ref = React.createRef<React.ElementRef<typeof F0Icon>>()
+    render(<F0Icon icon={Archive} ref={ref} testID="icon" />)
+    expect(ref.current).toBeTruthy()
+  })
+
+  it("renders with a color prop", () => {
+    const { getByTestId } = render(
+      <F0Icon icon={Archive} color="critical" testID="icon" />
+    )
+    expect(getByTestId("icon")).toBeTruthy()
+  })
+
+  it("caches wrapped icon: applyIconInterop returns same instance for same icon", () => {
+    const wrapped1 = applyIconInterop(Archive)
+    const wrapped2 = applyIconInterop(Archive)
+    expect(wrapped1).toBe(wrapped2)
+  })
+
+  it("caches per icon type: different icons return different wrapped instances", () => {
+    const wrappedArchive = applyIconInterop(Archive)
+    const wrappedHome = applyIconInterop(Home)
+    expect(wrappedArchive).not.toBe(wrappedHome)
+  })
+
+  it("renders with both color and className", () => {
+    const { getByTestId } = render(
+      <F0Icon icon={Archive} color="info" className="-ml-0.5" testID="icon" />
+    )
+    expect(getByTestId("icon")).toBeTruthy()
+  })
+
+  describe("className — cn() merging", () => {
+    it("passes through layout classes from className", () => {
+      const { getByTestId } = render(
+        <F0Icon icon={Archive} className="-ml-0.5" testID="icon" />
+      )
+      const element = getByTestId("icon")
+      expect(element.props.className).toContain("-ml-0.5")
+    })
+
+    it("merges conflicting size: custom w-* overrides variant", () => {
+      const { getByTestId } = render(
+        <F0Icon icon={Archive} size="md" className="h-10 w-10" testID="icon" />
+      )
+      const element = getByTestId("icon")
+      expect(element.props.className).toContain("w-10")
+      expect(element.props.className).toContain("h-10")
+      expect(element.props.className).not.toContain("w-5")
+      expect(element.props.className).not.toContain("h-5")
+    })
+
+    it("merges conflicting color: custom text-* overrides variant", () => {
+      const { getByTestId } = render(
+        <F0Icon
+          icon={Archive}
+          color="critical"
+          className="text-red-500"
+          testID="icon"
+        />
+      )
+      const element = getByTestId("icon")
+      expect(element.props.className).toContain("text-red-500")
+      expect(element.props.className).not.toContain("text-f0-icon-critical")
+    })
+
+    it("uses only variant classes when className is undefined", () => {
+      const { getByTestId } = render(
+        <F0Icon icon={Archive} size="sm" color="positive" testID="icon" />
+      )
+      const element = getByTestId("icon")
+      expect(element.props.className).toContain("w-4")
+      expect(element.props.className).toContain("h-4")
+      expect(element.props.className).toContain("text-f0-icon-positive")
+    })
+
+    it("combines non-conflicting variant and className", () => {
+      const { getByTestId } = render(
+        <F0Icon
+          icon={Archive}
+          size="lg"
+          color="info"
+          className="opacity-50"
+          testID="icon"
+        />
+      )
+      const element = getByTestId("icon")
+      expect(element.props.className).toContain("w-6")
+      expect(element.props.className).toContain("h-6")
+      expect(element.props.className).toContain("text-f0-icon-info")
+      expect(element.props.className).toContain("opacity-50")
+    })
+  })
+})