# @karrotmarket/lynx-monochrome-icon

Lynx monochrome icons for Seed Design System.

## Installation

```bash
yarn add @karrotmarket/lynx-monochrome-icon
yarn add -D @karrotmarket/lynx-icon-config
```

## Setup

```typescript
import { defineConfig } from '@lynx-js/rspeedy'
import { applyLynxIconConfig } from '@karrotmarket/lynx-icon-config'

export default defineConfig({
  plugins: [
    pluginReactLynx(),
  ],

  tools: {
    rspack(config) {
      applyLynxIconConfig(config)
      return config
    },
  },
})
```

## Usage

```typescript
import { useMainThreadRef } from '@lynx-js/react';
import type { MainThread } from '@lynx-js/types';
import { IconAppleFill, IconArrowLeft } from '@karrotmarket/lynx-monochrome-icon';

function MyComponent() {
  const iconRef = useMainThreadRef<MainThread.Element>(null);

  return (
    <view>
      {/* Default size (24px) */}
      <IconAppleFill color="#FF6B00" />

      {/* Override the default size */}
      <IconAppleFill size={32} color="#FF6B00" />

      {/* style.width / style.height override size individually */}
      <IconAppleFill
        size={32}
        color="#FF6B00"
        style={{ width: '16px', height: '16px' }}
      />

      {/* Ref + passthrough props */}
      <IconArrowLeft
        ref={iconRef}
        size={32}
        color="#000000"
        className="icon-accent"
        mode="aspectFit"
        bindload={(event) => {
          console.log(event);
        }}
      />
    </view>
  );
}
```

## Props

### IconProps

```typescript
interface IconProps {
  size?: number;       // Default: 24
  color?: string;     // Optional
  className?: string;
  style?: ImageProps['style'];
  // Plus Lynx <image> props/directives except src, ref, main-thread:ref, tint-color
}
```

- **size**: Icon size in pixels (default: 24)
- **color**: Icon tint color (optional, applied only when provided)
- **className**: Class name forwarded to the underlying `<image>`
- **style**: Optional Lynx `<image>` style object. `width` and `height` override the fallback `size` individually when provided.
- **ref**: Forwarded to the underlying `<image>` as `MainThread.Element`
- **other props**: Lynx `<image>` props and directives such as `mode`, `placeholder`, `bindload`

## Related Packages

- [@karrotmarket/lynx-icon-config](../lynx-icon-config) - Rspack config helper for Lynx icons (recommended)
- [@karrotmarket/lynx-icon-loader](../lynx-icon-loader) - Rspack/Webpack loader for Lynx icons (legacy)
- [@karrotmarket/assets-monochrome](../../assets/monochrome) - Raw SVG assets

## License

Apache-2.0