import { Canvas, Meta } from "@storybook/blocks";
import "./Icon.stories.module.scss";
import * as IconStories from "./Icon.stories";

<Meta of={IconStories} />

# Icon

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [States](#states)
- [Icons list](#icons-list)
- [Feedback](#feedback)

## Overview

Icon component is our component to unify the supported icon types (Vibe Icons, FontIcon and Custom SVG Icons)

<Canvas of={IconStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Always wrap icons with Icon component",
    "Try to always use icon alongside text or provide tooltip to accommodate the icon"
  ]}
/>

## Variants

### Vibe Icon

<Canvas of={IconStories.VibeIcon} />

### FontIcon

<Canvas of={IconStories.FontIcon} />

### Custom SVG

<Canvas of={IconStories.CustomSvg} />

## States

### Color

As a default the icon will inherit the color of it's parent container

<Canvas of={IconStories.Color} />

## Icons List

Icons are exported by name from `monday-ui-react-core/icons`:

```javascript
import { DoubleCheck } from "monday-ui-react-core/icons";
```

<Canvas of={IconStories.IconsListStory} />