import { Layout, Playground, Attributes } from 'lib/components'
import Title from 'lib/components/playground/title'
import { Spacer, Tabs, Snippet } from 'components'
import * as Icon from '@geist-ui/react-icons'
import Github from '@geist-ui/react-icons/github'
import IconsGallery from 'lib/components/displays/icons'

export const meta = {
  title: '图标 Icons',
  group: '通用',
}

## Icons / 图标

显示 SVG 格式的标准向量图形。

<Title title="安装" desc="安装图标库到你的项目中。" />
<Tabs initialValue="yarn">
  <Tabs.Item label="Yarn" value="yarn">
    <Spacer y={0.6} />
    <Snippet width="400px">yarn add @geist-ui/react-icons</Snippet>
  </Tabs.Item>
  <Tabs.Item label="npm" value="npm">
    <Spacer y={0.6} />
    <Snippet width="400px">npm i @geist-ui/react-icons</Snippet>
  </Tabs.Item>
</Tabs>

<Playground
  title="引入图标库"
  scope={{ Icon, Github, Spacer }}
  code={`
// import * as Icon from '@geist-ui/react-icons'
// 或是
// import { Github } from '@geist-ui/react-icons'
// 或是引入单个
// import Github from '@geist-ui/react-icons/github'

<>
  <Icon.Github />
  <Spacer x={1} inline />
  <Github />
</>
`} />

<Playground
  title="色彩"
  scope={{ Github }}
  code={`
<Github color="red" />
`}
/>

<Playground
  title="大小"
  scope={{ Github, Spacer }}
  code={`
<>
  <Github size={16} /> <Spacer inline x={.35} />
  <Github size={20} /> <Spacer inline x={.35} />
  <Github size={24} /> <Spacer inline x={.35} />
  <Github size={28} /> <Spacer inline x={.35} />
  <Github size={32} /> <Spacer inline x={.35} />
  <Github size={36} />
</>
`}
/>

<IconsGallery />

<Attributes edit="/pages/zh-cn/components/icons.mdx">
<Attributes.Title>Icon.Props</Attributes.Title>

| 属性      | 描述     | 类型            | 推荐值                           | 默认 |
| --------- | -------- | --------------- | -------------------------------- | ---- |
| **color** | 图标颜色 | `string`        | -                                | -    |
| **size**  | 图标大小 | `number`        | -                                | -    |
| ...       | 原生属性 | `SVGAttributes` | `'id', 'name', 'className', ...` | -    |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
