---
name: Icon 图标
route: /guide/icon
menu: basic
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import { Icon } from "shineDev";
import List from "./demo/List";
import code from "./demo";
import "./demo/index.scss";

# Icon 图标

## 概述
提供了一套常用的图标集合。

## 代码示例

<MessageBox messageType="info">
  为了让用户直观地查看代码演示，我们加入了{" "}
  <InlineCode>shine-icon-helper</InlineCode>{" "}
  修饰符，在开发过程中无需配置该字段。
</MessageBox>

#### 基础用法
直接通过设置 `iconName` 来使用即可。

<Example 
  display={<JsxParser {...code.basic} />}
  code={{code:code.basic.jsx}}
  components={code.basic.components}
/>

#### 图标尺寸
通过设置 `size` 设置当前图标尺寸，支持lg（33%递增）、两倍、三倍、四倍和五倍放大。

<Example 
  display={<JsxParser {...code.size} />}
  code={{code:code.size.jsx}}
  components={code.size.components}
/>

#### 动画
任意图标均支持无缝旋转 `isSpin` ，或按照八个方位依次旋转 `isPulse`，尤其适合用来加载等待或请求等待。

<Example 
  display={<JsxParser {...code.spin} />}
  code={{code:code.spin.jsx}}
  components={code.spin.components}
/>

#### 旋转与翻转
通过设置旋转 `rotate` 与翻转 `flip` 属性，可以扩展图标的应用场景。

<Example 
  display={<JsxParser {...code.rotate} />}
  code={{code:code.rotate.jsx}}
  components={code.rotate.components}
/>

## 图标集合

<List />

## 配置参数

<PropsTable of={Icon} />