dingtalk-design-icons

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