ciphermask/ui/components/ui/icon

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

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.

## 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} />