D-Design 图标库

官方提供的图标库，适用于 React 版本

使用

tnpm i dingtalk-design-icons@latest --save
import { SearchOutlined } from 'dingtalk-design-icons';

按需加载：

import SearchOutlined from 'dingtalk-design-icons/lib/SearchOutlined';

or

import SearchOutlined from 'dingtalk-design-icons/es/SearchOutlined';

或者使用 babel-plugin-import 自动按需加载。

tips: 直接在文档中点击 icon，自动复制代码，Quick Fix... (⌘.) 自动引入包。

依赖的图标 Iconfont 项目： IconfontCN - DingTalk Design System

API

| 参数名 | 说明 | 类型 | 默认值 | 备注 | | ------ | ---- | ---- | ------ | ---- | | className | 设置图标的样式名 |string| | | | style | 设置图标的样式，例如 fontSize 和 color| CSSProperties | | | | iconBtn | 设置为 Botton 样式的 icon | boolean | false | | | onClick | 点击事件 |() => void| | |

自定义 Font 图标

我们提供了一个 createFromIconfontCN 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。

import createFromIconfontCN from 'dingtalk-design-icons/createFromIconfontCN'; // 按需加载

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_135284_ecj6zgpqtbn.js', // 在 iconfont.cn 上生成
});

ReactDOM.render(<MyIcon type="DingTalk-XDS_iconcastscreenfill" />, mountedNode);

其本质上是创建了一个使用 标签来渲染图标的组件。

options 的配置项如下：

| 参数 | 说明 | 类型 | 默认值 | | ------ | ---- | ---- | ------ | | extraCommonProps | 给所有的 svg 图标 组件设置额外的属性 | { [key: string]: any } | {} | scriptUrl | iconfont.cn 项目在线生成的 js 地址 | string | string[] | - |

在 scriptUrl 都设置有效的情况下，组件在渲染前会自动引入 iconfont.cn 项目中的图标符号集，无需手动引入。

见 iconfont.cn 使用帮助 查看如何生成 js 地址。

命名规范

• 实底风格：ComponentFilled
• 线框风格：ComponentOutlined