metamask-extension/ui/components/ui/icon

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import IconCaretLeft from './icon-caret-left.js';
import Approve from './approve-icon.component';
import BuyIcon from './overview-buy-icon.component';
import CopyIcon from './copy-icon.component';
import InfoIcon from './info-icon.component';
import InfoIconInverted from './info-icon-inverted.component';
import Interaction from './interaction-icon.component';
import PaperAirplane from './paper-airplane-icon';
import Preloader from './preloader';
import ReceiveIcon from './receive-icon.component';
import SendIcon from './send-icon.component';
import Sign from './sign-icon.component';
import SunCheck from './sun-check-icon.component';
import Swap from './swap-icon-for-list.component';
import SwapIcon from './overview-send-icon.component';
import SwapIconComponent from './swap-icon.component';

# Icon

A range of SVG icon components

> 💡 A lot of the our icons have different props and are not consistent we will need to work on fixing this.

## Component API

<ArgsTable of={IconCaretLeft} />

## Usage

The following describes the props and example usage for this component.

### Size

Use the `size` prop to change the size of the icon it should adhere to an `8px` grid e.g. `16px`, `24px`, `32px`

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--size" />
</Canvas>

### Color

Use the `color` prop to change the color of the icon. `color` accepts any css value. Should use the valid design token css variables

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--color" />
</Canvas>

### AriaLabel

Use the `ariaLabel` prop with icons intended to be used without text. e.g. back buttons or icons that should provide extra information to screen readers

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--aria-label" />
</Canvas>

Will render the html

```html
<svg
  width="24"
  height="24"
  fill="currentColor"
  aria-label="back"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512"
>
  <path
    d="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z"
  ></path>
</svg>
```

### ClassName

Use the `className` prop to add an additional class to the icon. This additional class is recommend to be used with layout of positioning css

# DEPRECATED ICONS

> The icons below use many different prop combinations and should be updated to the above api

## Approve

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--approve-story" />
</Canvas>

<ArgsTable of={Approve} />

## Sign

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--sign-story" />
</Canvas>

<ArgsTable of={Sign} />

## Swap

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--swap-story" />
</Canvas>

<ArgsTable of={Swap} />

## SendIcon

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--send-icon-story" />
</Canvas>

<ArgsTable of={SendIcon} />

## ReceiveIcon

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--receive-icon-story" />
</Canvas>

<ArgsTable of={ReceiveIcon} />

## Interaction

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--interaction-story" />
</Canvas>

<ArgsTable of={Interaction} />

## InfoIcon

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--info-icon-story" />
</Canvas>

<ArgsTable of={InfoIcon} />

## InfoIconInverted

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--info-icon-inverted-story" />
</Canvas>

<ArgsTable of={InfoIconInverted} />

## SunCheck

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--sun-check-story" />
</Canvas>

<ArgsTable of={SunCheck} />

## BuyIcon

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--buy-icon-story" />
</Canvas>

<ArgsTable of={BuyIcon} />

## SwapIcon

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--swap-icon-story" />
</Canvas>

<ArgsTable of={SwapIcon} />

## Send/SwapIcon

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--send-swap-icon-story" />
</Canvas>

<ArgsTable of={SwapIconComponent} />

## PaperAirplane

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--paper-airplane-story" />
</Canvas>

## CopyIcon

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--copy-icon-story" />
</Canvas>

<ArgsTable of={CopyIcon} />

## Preloader

<Canvas>
  <Story id="ui-components-ui-icon-icon-stories-js--preloader-story" />
</Canvas>

<ArgsTable of={Preloader} />