{"size": 4718, "ext": "js", "max_stars_repo_path": "packages/storybook/stories/elements/icon.js", "max_stars_repo_name": "rakesh0r/react-spectre", "max_stars_repo_stars_event_min_datetime": "2018-01-04T05:12:14.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-04T23:13:23.000Z", "max_issues_repo_path": "packages/storybook/stories/elements/icon.js", "max_issues_repo_name": "rakesh0r/react-spectre", "max_issues_repo_issues_event_min_datetime": "2018-01-08T12:57:02.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T10:13:19.000Z", "max_forks_repo_path": "packages/storybook/stories/elements/icon.js", "max_forks_repo_name": "rakesh0r/react-spectre", "max_forks_repo_forks_event_min_datetime": "2018-01-06T13:13:49.000Z", "max_forks_repo_forks_event_max_datetime": "2020-03-31T06:06:39.000Z"}
{"max_stars_count": 70, "max_issues_count": 42, "max_forks_count": 18, "avg_line_length": 25.6413043478, "max_line_length": 108, "alphanum_fraction": 0.5154726579}
import React from 'react'
import { withInfo } from '@storybook/addon-info'

import { H4 } from '@react-spectre/typography'
import { Icon } from '@react-spectre/icon'
import { Button } from '@react-spectre/button'

const buttonStyle = { margin: '0 20px 20px 0' }

H4.displayName = 'H4'
Button.displayName = 'Button'

export default stories => {
  stories.add(
    'Icons',
    withInfo(`
      React components for Spectre.css's icons.

      ## Installation

      ~~~shell
      npm install @react-spectre/icon --save
      ~~~

      ## Usage

      ~~~js
      import { Icon } from '@react-spectre/icon'
      ~~~

      **[Complete documentation](https://github.com/react-spectre/react-spectre/tree/master/packages/icon)**
    `)(() => (
      <div style={{ padding: 20, width: 400 }}>
        <H4>Navigation Icons</H4>

        <Button primary style={buttonStyle}>
          <Icon name="arrow-up" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="arrow-right" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="arrow-down" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="arrow-left" />
        </Button>

        <br />

        <Button primary style={buttonStyle}>
          <Icon name="upward" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="forward" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="downward" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="back" />
        </Button>

        <br />

        <Button primary style={buttonStyle}>
          <Icon name="caret" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="menu" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="apps" />
        </Button>

        <br />

        <Button primary style={buttonStyle}>
          <Icon name="more-horiz" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="more-vert" />
        </Button>

        <H4>Action Icons</H4>

        <Button primary style={buttonStyle}>
          <Icon name="resize-horiz" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="resize-vert" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="plus" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="minus" />
        </Button>

        <br />

        <Button primary style={buttonStyle}>
          <Icon name="cross" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="check" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="stop" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="shutdown" />
        </Button>

        <br />

        <Button primary style={buttonStyle}>
          <Icon name="refresh" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="search" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="flag" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="bookmark" />
        </Button>

        <br />

        <Button primary style={buttonStyle}>
          <Icon name="edit" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="delete" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="share" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="download" />
        </Button>

        <br />

        <Button primary style={buttonStyle}>
          <Icon name="upload" />
        </Button>

        <H4>Object Icons</H4>

        <Button primary style={buttonStyle}>
          <Icon name="mail" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="people" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="message" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="photo" />
        </Button>

        <br />

        <Button primary style={buttonStyle}>
          <Icon name="time" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="location" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="link" />
        </Button>
        <Button primary style={buttonStyle}>
          <Icon name="emoji" />
        </Button>
      </div>
    ))
  )
}
