---
title: Icon 图标 (doing)
order: 3
group:
  path: /components
nav: 
  title: 组件
  path: /components
---

## 使用

```js
import { Icons} from 'baas-ui';
const { CaretLeftIcon } = Icons;

<CaretLeftIcon />
```
> SVG 图标，以后会将 Icon 从组件库中抽离出来。

### 图标列表

```jsx
import React from 'react';
import { Icons, Row, Col } from 'baas-ui';

const {
  CaretLeftIcon,
  CaretRightIcon,
  CheckCircleIcon,
  CloseCircleIcon,
  InfoCircleIcon,
  QuestionCircleIcon,
  WarningCircleIcon,
} = Icons;

const IconCell = ({ icon: IconComponent, name }) => (
  <div style={{ textAlign: 'center', marginBottom: 24 }}>
    <div style={{ marginBottom: 4 }}><IconComponent fontSize={36} /></div>
    <div>{name}</div>
  </div>
);

export default () => (
  <div>
    <Row>
      <Col span={6}>
        <IconCell icon={CaretLeftIcon} name={`<CaretLeftIcon />`} />
      </Col>
      <Col span={6}>
        <IconCell icon={CaretRightIcon} name={`<CaretRightIcon />`} />
      </Col>
      <Col span={6}>
        <IconCell icon={CheckCircleIcon} name={`<CheckCircleIcon />`} />
      </Col>
      <Col span={6}>
        <IconCell icon={CloseCircleIcon} name={`<CloseCircleIcon />`} />
      </Col>
    </Row>
    <Row>
      <Col span={6}>
        <IconCell icon={InfoCircleIcon} name={`<InfoCircleIcon />`} />
      </Col>
      <Col span={6}>
        <IconCell icon={QuestionCircleIcon} name={`<QuestionCircleIcon />`} />
      </Col>
      <Col span={6}>
        <IconCell icon={WarningCircleIcon} name={`<WarningCircleIcon />`} />
      </Col>
      <Col span={6}>
      </Col>
    </Row>
  </div>
);
```