# 组件图标库定制
[TOC]
部分组件支持自定义图标功能,图标使用[ iconfont.cn](https://2x.antdv.com/components/icon-cn#components-icon-demo-iconfont)
### 定义自己的图标库
1.注册[iconfont](https://www.iconfont.cn/)账户
2.创建项目,选择资源管理-->我的项目如下图
![](https://img.kancloud.cn/1a/16/1a16fd5acbf0795b626b70c1b41ffe0a_1485x557.png)
![](https://img.kancloud.cn/5c/25/5c25e7d30b902641d49c0704c74a38ee_1602x915.png)
3.选择图标资源到项目中
在素材库中找适合的图标
* 选择素材库
![](https://img.kancloud.cn/b0/b2/b0b2e1fa12b0e526c2bcf1866e9e2297_1604x530.png)
* 添加到待入库
![](https://img.kancloud.cn/85/df/85dfb9d955e1be0c83b0d10ca0f69a57_1380x548.png)
* 添加到项目
![](https://img.kancloud.cn/af/4e/af4e99b35011674163a006299971af31_1578x1245.png)
* 生成图标库
点击`“查看在线链接”`
![](https://img.kancloud.cn/9c/df/9cdfecdb616095e2a506151d199df5c8_1412x392.png)
无代码时,点击`“生成代码”`;有代码时点击`“更新代码”`
![](https://img.kancloud.cn/f3/79/f379be08547c5201525b72ec3c396b1d_1612x786.png)
![](https://img.kancloud.cn/f5/b4/f5b4a39115ed5c13a4a1bba98fdf9a7b_1116x354.png)
![](https://img.kancloud.cn/e9/dc/e9dce316397b115ce6b619ba5ebe97dc_1586x745.png)
### 使用图标库
1.设置图标库地址
![](https://img.kancloud.cn/25/83/25831e2bde5e23f5c432347fa13ab741_968x619.png)
2.拷贝图标代码到项目配置中,以快捷导航组件为例
![](https://img.kancloud.cn/78/6e/786e8fdc91a64457977f92c2c14b9ff9_1635x873.png)
把图标代码icon-testchakanxiansuo 赋值给icon属性即可,如下图
![](https://img.kancloud.cn/f8/09/f809311c763952242ace0efbf49c4722_1000x494.png)
### 使用base64格式图标
base64格式图标无需定义图标库直接拷贝图标base64格式代码即可
![](https://img.kancloud.cn/14/7c/147cf9334bb997e04d8a67b6d3371e5d_1258x452.png)
![](https://img.kancloud.cn/42/8c/428c763ab4c07d63c9c8c3cc66418481_1279x808.png)
![](https://img.kancloud.cn/00/b8/00b8a2c7f23da1312d30fd1e6195588a_1076x542.png)
![](https://img.kancloud.cn/d3/c2/d3c2b5f700b19493c7f9bb5f5cc0da30_994x601.png)
- 项目介绍
- 仪表盘/门户
- 仪表盘/门户设计常见问题
- 基础配置
- 1.基础操作
- 1.1 登录
- 1.2 新建面板使用
- 1.3 如何配置菜单
- 2. 静态数据使用
- 3. 动态数据使用
- 4. 数据集配置
- 4.1 SQL数据集
- 4.2 API数据集
- 4.3 JSON数据集
- 4.4 WebSocket数据集
- 5.字典配置
- 6.多数据源配置
- 7. 组件交互设置
- 7.1 跳转地址
- 7.2 查询配置
- 7.3 钻取配置
- 7.4 联动配置
- 7.5 自定义JS脚本
- 图表组件
- 1.基础配置项
- 1.1 卡片设置
- 1.2 标题设置
- 1.3 X轴设置
- 1.4 Y轴设置
- 1.5 提示语设置
- 1.6 坐标轴边距
- 1.7 图例设置
- 1.8 中心坐标
- 1.9 柱体设置
- 2.柱形图
- 2.1 基础柱形图
- 2.2 堆叠柱形图
- 2.3 动态柱形图
- 2.4 背景柱形图
- 2.5 对比柱形图
- 2.6 正负条形图
- 2.8 折柱图
- 3.饼图
- 4.折线图
- 4.1 普通折线图
- 4.2 平滑折线图
- 4.3 阶梯折线图
- 4.4 对比折线图
- 5.雷达图
- 5.1 普通雷达图
- 5.2 圆形雷达图
- 6.环形图
- 7.面积图
- 8.进度图
- 9. 漏斗图
- 9.1 普通漏斗图
- 9.2 金字塔漏斗图
- 10.象形图
- 11.仪表盘
- 基础仪表盘
- 多色仪表盘
- 12. 散点图
- 12.1 普通散点图
- 12.2 气泡图
- 布局组件
- 1.选项卡
- 2.栅格
- 数据列表组件
- 1.数据表格
- 2.数据列表
- 表单组件
- 1.表单
- 2.轮播图
- 3.Iframe
- 4.图片
- 5.文本
- 6.按钮
- 7.日历
- 首页常用组件
- 1.快捷导航
- 2. 统计卡片
- 3.项目列表
- 4.待办事项
- 5.最新动态
- 使用技巧
- 制作图标库
- 组件配置
- 自定义组件
- 地图组件
- 标注地图
- 散点地图
- 万能组件
- 3d柱子
- 牛气冲天
- 水球图
- 3D地图
- 数据预警示例
- 自定义属性
- 设置地图标注文字
- 设置图表标线
- 如何在自定义属性中使用数据(静态,接口,sql)