## 简介

关于阿里云UI Icon设计规范信息，请参考[阿里云UI图标设计规范](/nexconsole/design/ll5rq9)。

在新版组件库中，我们提供了新的 SVG 图标用于替换原先的 font 图标，为了向下兼容我们仍然支持以前的使用方式。

## SVG Icon 组件

* 完全离线化使用，不需要从 CDN 下载字体文件。
* 支持 Tree-shaking，按需引入。
* 在低端设备上 SVG 有更好的清晰度。

### 使用方式

```
tnpm i @ali/xconsole-icons
```

```
import { AccesskeyLine } from '@ali/xconsole-icons'

export function Demo() {
  return <AccesskeyLine style={{ fontSize: '12px', color: 'red' }} />
}
```

### 示例

```tsx
import React from 'react';
import { Message } from '@alicloud/console-components';
import * as Icons from '@ali/xconsole-icons';

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
      {
        Object.keys(Icons).map((Icon) => {
          return (
            <div
              style={{
                width: '140px',
                textAlign: 'center',
                margin: '16px',
              }}
              onClick={() => {
                navigator.clipboard.writeText(`<${Icon} />`);
                Message.show({
                  type: 'success',
                  content: `<${Icon} /> copied`,
                });
              }}
            >
              <div style={{ fontSize: '32px' }}>
                {/* @ts-ignore */}
                {React.createElement(Icons[Icon])}
              </div>
              <div style={{ fontSize: '12px' }}>
                {Icon}
              </div>
            </div>
          );
        })
      }
    </div>
  );
}

export const meta = {
  title: '@ali/xconsole-icons',
  describe: '',
};

```

## Font Icon 组件

### 示例

基本用法

```tsx
import React from 'react';
import { Icon } from '@alicloud/console-components';

export default () => {
  return <Icon type="atm" />;
};

export const meta = {
  title: '基本',
  describe: '展示图标基本使用方法。',
};

```

Icon 支持 type 类型参见 https://done.alibaba-inc.com/dsm/79480/components/detail/icon?themeid=133315\&tabActiveKey=component

### API

```tsx
```

### 更多示例

```tsx
```

```tsx
```

```tsx
```

```tsx
```

```tsx
```