制作圖標庫 · JimuReport 儀表盤設計

# 組件圖標庫定制 [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)