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

## 使用

```js
import { Icons } from 'quanta-design';
const { CaretLeftIcon } = Icons;

<CaretLeftIcon />;
```

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

### 图标列表

```jsx
import React from 'react';
import { Icons, Row, Col } from 'quanta-design';

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

const IconCell = ({ icon: IconComponent, name }) => (
  <div style={{ textAlign: 'center', marginBottom: 24 }}>
    <div style={{ marginBottom: 4 }}>
      <IconComponent showHover fontSize={28} />
    </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>
    <Row>
      <Col span={6}>
        <IconCell icon={MinusSquareIcon} name={`<MinusSqureIcon />`} />
      </Col>
      <Col span={6}>
        <IconCell icon={PlusSquareIcon} name={`<PlusSquareIcon />`} />
      </Col>
    </Row>
  </div>
);
```