# @deriv-com/quill-icons-web

React icon components for Deriv's **Quill** design system. Every icon is generated
straight from the Quill Figma library — the single source of truth — so what you
import always matches design.

## Install

```bash
npm install @deriv-com/quill-icons-web
# pnpm add @deriv-com/quill-icons-web
# yarn add @deriv-com/quill-icons-web
```

`react >= 17` is required as a peer dependency.

## Usage

```tsx
import { Num0FlagPlaceholderIcon } from '@deriv-com/quill-icons-web'

export function Example() {
  return <Num0FlagPlaceholderIcon size={32} />
}
```

Icons in the **system** group are single-color and inherit the surrounding text
color via `currentColor`:

```tsx
<span style={{ color: 'rebeccapurple' }}>
  <ArrowLeftRegularIcon size={24} />
</span>
```

Other groups (flags, markets, currency, accounts, …) keep their fixed brand
colors from Figma — do not wrap them in a color style expecting them to tint.

### Props

Each icon extends `React.SVGProps<SVGSVGElement>` and adds:

| Prop   | Type               | Default | Description               |
| ------ | ------------------ | ------- | ------------------------- |
| `size` | `number \| string` | `24`    | Sets both width & height. |

Every other SVG prop (`className`, `fill`, `onClick`, `ref`, `aria-*`, …) passes
straight through to the underlying `<svg>`.

### Per-group imports

Import a single group to keep things tidy (the package is fully tree-shakeable
either way):

```tsx
import { Num0FlagPlaceholderIcon } from '@deriv-com/quill-icons-web/flag'
```

Available groups: `accounts`, `app-stores`, `currency`, `flag`, `markets`,
`social`, `system`, `trade`.

### Raw SVGs

The source SVG files ship in the package if you need them directly:

```ts
import iconUrl from '@deriv-com/quill-icons-web/svg/flag/0-flag-placeholder.svg'
```

## Formats

Ships ESM + CommonJS with TypeScript types. `sideEffects: false` for tree-shaking.

## Source & versioning

Generated from Figma by the pipeline in
[deriv-com/product-design-quill-icons](https://github.com/deriv-com/product-design-quill-icons).
Generated files are not edited by hand — changes flow from the Figma library.

## License

[MIT](./LICENSE) © Deriv