open-index/open-npm huggingface dataset:
npm package: @icedesign/awesome-icon
Description: 体验版 Icon 组件
Author: ICE Team
Latest version: 0.1.2

---
title: AwesomeIcon
category: BizComponents
chinese: 增强图标组件
---

AwesomeIcon 组件，相比 Icon，可以从 [http://iconfont.cn](iconfont.cn) 自定义图标集，同时内置了一些扩展的图标集合。

#### 基本使用示例

```jsx
import ReactDOM from 'react-dom'
import AwesomeIcon from '@icedesign/awesome-icon';

ReactDOM.render(<AwesomeIcon type="qrcode"/>, mountNode);
```

#### 自定义 iconfont.cn 项目使用

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import AwesomeIcon from '@icedesign/awesome-icon';

// 使用 custom 生成自定义 ICON 组件
const CustomIcon = AwesomeIcon.custom({
  fontFamily: 'iconfont',
  prefix: 'icon',
  css: 'https://at.alicdn.com/t/font_1472628097_7496383.css'
});

class App extends Component {
  state = {};

  render() {
    return (
      <CustomIcon type="dingding" />
    );
  }
}

ReactDOM.render(<App />, mountNode);
```

#### custom 方法参数说明

- fontFamily：[http://iconfont.cn](iconfont.cn) 项目的 font-family，详见项目配置
- prefix：[http://iconfont.cn](iconfont.cn) 项目中的 Symbol 前缀，详见项目配置
- css：[http://iconfont.cn](iconfont.cn) 项目生成的在线 CSS CDN 地址

#### 自定义类型 type 说明

![](https://gw.alicdn.com/tfs/TB1bf21XHSYBuNjSspiXXXNzpXa-1304-810.png)

CustomIcon 组件的 type 值其实是 iconfont.cn 每一个图标的 symbol 名称，获取方法是在 iconfont.cn 后台选择`复制代码`，如结果是 `icon-dianpu`，同时配置的 `prefix` 为 `icon` ，此图标的 type 类型即为 `dianpu`

**注意：**如果您在同一个项目中引入多个 iconfont.cn 的项目，请确保项目的  `font-family` 及 `symbol prefix` 都不相同，以避免全局命名的冲突。



#### QA

Q 如何从 [http://iconfont.cn](iconfont.cn) 获取项目信息？

A 进入 iconfont.cn 的项目列表，选择 `Font class` 可以获取项目的(1)在线 CDN 地址

选择(2)更多操作 - 项目信息可以查看和修改项目的 `font-family` 及 `symbol prefix`

![](https://gw.alicdn.com/tfs/TB1bTf2XMmTBuNjy1XbXXaMrVXa-2002-1330.png)
npm package: @icedesign/balloon-confirm
Description: ICE 气泡确认框
Latest version: 1.0.6

---
title: BalloonConfirm
category: Components
chinese: 气泡确认框
---

ICE 气泡确认框

## 安装和升级

```bash
npm install @icedesign/balloon-confirm
```

## 开发指南

气泡确认框

### 何时使用

- 当目标操作需要进一步确认时，弹出确认框，询问用户。
- 该组件作为一个轻量级的确认交互，不宜在内部放过多元素。如需较多定制，可直接使用`Balloon`组件。

### 使用注意

- 因为内部使用`Balloon`组件，所以对于子元素是自定义`React Component`的情况，需要主动传递`onMouseEnter`、`onMouseLeave`、`onClick`事件。
- 更多`props`可参考`Balloon`组件，其中`triggerType`默认为`click`。

## API

### 气泡确认框

| 参数名      | 说明           | 必填 | 类型        | 默认值                                               | 备注 |
| ----------- | -------------- | ---- | ----------- | ---------------------------------------------------- | ---- |
| className   | 样式名         | 否   | string      | -                                                    |      |
| title       | 确认框描述     | 否   | string      | -                                                    |      |
| confirmText | 确认按钮文本   | 否   | string      | '确认'                                               |      |
| cancelText  | 取消按钮文本   | 否   | string      | '取消'                                               |      |
| onConfirm   | 点击确认的回调 | 否   | function(e) | -                                                    |      |
| onCanel     | 点击取消的回调 | 否   | function(e) | -                                                    |      |
| Icon        | 自定义气泡图标 | 否   | ReactNode   | <Icon type="warning" style={{ color: '#FFA003' }} /> |      |
npm package: @icedesign/base-dist
Description: 将 `@icedesign/base` 里的 prefix 改掉，然后构建 dist 给站点使用，解决样式冲突。
Author: ICE Team
Latest version: 0.2.2

# ice-design-base-dist

将 `@icedesign/base` 里的 prefix 改掉，然后构建 dist 给站点使用，解决样式冲突。

## 更改 prefix

- js: `/lib/_components/@alife/next-config-provider/lib/index.js`
- css: `/lib/_components/@alife/next-core/lib/variables/_global.scss`
npm package: @icedesign/blank-layout
Description: 完全空白的布局，通常用来做首页、产品介绍或者登陆页面。推荐使用登陆页分类下的区块。
Author: ICE Team
Latest version: 0.1.5

# blank-layout

简介：空白布局

空白的布局

![截图](https://img.alicdn.com/tfs/TB1T65abVOWBuNjy0FiXXXFxVXa-2840-1596.png)
npm package: @icedesign/blank-layout-block
Description: 空白的布局，交给你自由发挥，通常用来做首页、产品介绍或者个性化的宣传页面。
Author: ICE Team
Latest version: 0.1.1

# blank-layout

简介：空白布局

空白的布局

![截图](https://gw.alicdn.com/tfs/TB1SvQmlsLJ8KJjy0FnXXcFDpXa-976-974.png)
npm package: @icedesign/board-list-block
Description: TODO 任务管理面板，可拖拽排序
Author: ICE Team
Latest version: 3.0.1

# board-list

简介：任务面板

TODO 任务管理面板，可拖拽排序

![截图](https://unpkg.com/@icedesign/board-list-block/screenshot.png)
npm package: @icedesign/braft-editor-block
Description: 基于 draft-js 开发的美观易用的 React 富文本编辑器
Author: 思忠
Latest version: 3.0.1

# braft-editor

简介：富文本编辑器

基于 draft-js 开发的美观易用的 React 富文本编辑器

![截图](https://unpkg.com/@icedesign/braft-editor-block/screenshot.png)