cnd-components-mcp/componentData/components/Icon/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

### 示例
```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(`&lt;${Icon} /&gt;`);
                Message.show({
                  type: 'success',
                  content: `&lt;${Icon} /&gt; copied`,
                });
              }}
            >
              &lt;div style={{ fontSize: '32px' }}&gt;
                {/* @ts-ignore */}
                {React.createElement(Icons[Icon])}
              &lt;/div&gt;
              &lt;div style={{ fontSize: '12px' }}&gt;
                {Icon}
              &lt;/div&gt;
            &lt;/div&gt;
          );
        })
      }
    &lt;/div&gt;
  );
}

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

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

export default () => {
  return &lt;Icon type="atm" /&gt;;
};

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

```
### API
```tsx
```
### 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```