o11y-icons/stories/Docs.mdx

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Docs" />

# @signozhq/icons

SVG-based React icon components with fixed size presets and custom sizing.

---

## Installation

```bash
# pnpm
pnpm add @signozhq/icons

# npm
npm install @signozhq/icons

# yarn
yarn add @signozhq/icons
```

---

## Usage

Import the icon component you need and render it. Icons accept `size`, `color`, and `strokeWidth` (and standard SVG props).

```tsx
import { ArrowRight } from '@signozhq/icons';

<ArrowRight size="lg" color="#2A2E37" />
```

---

## Fixed sizes (presets)

Use a **preset** when you want icons to match the design system: each preset defines both the icon size (in pixels) and a stroke width so icons stay sharp and consistent across the UI. Pass the preset name to the `size` prop.

### Quick reference

<table style={{ width: '100%', maxWidth: 360, borderCollapse: 'collapse', marginTop: 8, marginBottom: 16, fontSize: 14 }}>
  <thead>
    <tr style={{ borderBottom: '2px solid var(--docs-border-color, #e5e7eb)' }}>
      <th style={{ textAlign: 'left', padding: '10px 12px', fontWeight: 600 }}>Preset</th>
      <th style={{ textAlign: 'right', padding: '10px 12px', fontWeight: 600 }}>Size</th>
      <th style={{ textAlign: 'right', padding: '10px 12px', fontWeight: 600 }}>Stroke width</th>
    </tr>
  </thead>
  <tbody>
    <tr style={{ borderBottom: '1px solid var(--docs-border-color, #e5e7eb)' }}><td style={{ padding: '10px 12px' }}><code>xs</code></td><td style={{ textAlign: 'right', padding: '10px 12px' }}>10px</td><td style={{ textAlign: 'right', padding: '10px 12px' }}>0.83</td></tr>
    <tr style={{ borderBottom: '1px solid var(--docs-border-color, #e5e7eb)' }}><td style={{ padding: '10px 12px' }}><code>sm</code></td><td style={{ textAlign: 'right', padding: '10px 12px' }}>12px</td><td style={{ textAlign: 'right', padding: '10px 12px' }}>1</td></tr>
    <tr style={{ borderBottom: '1px solid var(--docs-border-color, #e5e7eb)' }}><td style={{ padding: '10px 12px' }}><code>md</code></td><td style={{ textAlign: 'right', padding: '10px 12px' }}>14px</td><td style={{ textAlign: 'right', padding: '10px 12px' }}>1.17</td></tr>
    <tr style={{ borderBottom: '1px solid var(--docs-border-color, #e5e7eb)' }}><td style={{ padding: '10px 12px' }}><code>lg</code></td><td style={{ textAlign: 'right', padding: '10px 12px' }}>16px</td><td style={{ textAlign: 'right', padding: '10px 12px' }}>1.33</td></tr>
    <tr style={{ borderBottom: '1px solid var(--docs-border-color, #e5e7eb)' }}><td style={{ padding: '10px 12px' }}><code>xl</code></td><td style={{ textAlign: 'right', padding: '10px 12px' }}>18px</td><td style={{ textAlign: 'right', padding: '10px 12px' }}>1.5</td></tr>
    <tr style={{ borderBottom: '1px solid var(--docs-border-color, #e5e7eb)' }}><td style={{ padding: '10px 12px' }}><code>2xl</code></td><td style={{ textAlign: 'right', padding: '10px 12px' }}>20px</td><td style={{ textAlign: 'right', padding: '10px 12px' }}>1.67</td></tr>
    <tr style={{ borderBottom: '1px solid var(--docs-border-color, #e5e7eb)' }}><td style={{ padding: '10px 12px' }}><code>3xl</code></td><td style={{ textAlign: 'right', padding: '10px 12px' }}>24px</td><td style={{ textAlign: 'right', padding: '10px 12px' }}>2</td></tr>
    <tr style={{ borderBottom: '1px solid var(--docs-border-color, #e5e7eb)' }}><td style={{ padding: '10px 12px' }}><code>4xl</code></td><td style={{ textAlign: 'right', padding: '10px 12px' }}>28px</td><td style={{ textAlign: 'right', padding: '10px 12px' }}>2.33</td></tr>
    <tr style={{ borderBottom: '1px solid var(--docs-border-color, #e5e7eb)' }}><td style={{ padding: '10px 12px' }}><code>5xl</code></td><td style={{ textAlign: 'right', padding: '10px 12px' }}>32px</td><td style={{ textAlign: 'right', padding: '10px 12px' }}>2.67</td></tr>
  </tbody>
</table>

### Example

```tsx
<ArrowRight size="sm" />   {/* 12px, stroke 1 */}
<ArrowRight size="lg" />   {/* 16px, stroke 1.33 */}
<ArrowRight size="2xl" />  {/* 20px, stroke 1.67 */}
```

You can override the stroke for a preset with the `strokeWidth` prop if needed.

---

## Custom size

Pass a number to `size` for any pixel dimension. Stroke width defaults to `2` when using a custom size; override with `strokeWidth` if needed.

```tsx
<ArrowRight size={32} />
<ArrowRight size={48} strokeWidth={1.5} color="currentColor" />
```

---

## Other props

- **`color`** — Stroke/fill color (default: `"currentColor"`).
- **`strokeWidth`** — Override stroke width when using a preset or custom size.
- **`className`** — Applied alongside the default `signoz-icon` class.

---

Browse the **Icons / Gallery** in the sidebar to search and preview all icons and copy snippets.