dingtalk-design-icons

icons

Usage no npm install needed!

<script type="module">
  import dingtalkDesignIcons from 'https://cdn.skypack.dev/dingtalk-design-icons';
</script>

README

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