自定义三方图标库

重要

本文中含有需要您注意的重要提示信息,忽略该信息可能对您的业务造成影响,请务必仔细阅读。

本文介绍如何添加并管理自定义的三方图标库,通过添加自定义 iconfont 项目库链接,在搭建页面时可为组件提供更加灵活丰富的图标。

添加图标库

魔笔平台支持集成 iconfont 项目库的图标资源,用户可在 iconfont 网站自行维护图标库资源,而后将图标库的 js 链接添加至魔笔平台即可。

1. 复制 iconfont 项目库 js 链接

进入 iconfont 官网,依次点击资源管理 -> 我的项目 -> Symbol -> 查看在线链接,可以看到该项目库的 js 链接,复制该链接。

image

2. 在魔笔平台添加 js 链接

在设置中选择图标库,点击添加。

image

填写图标库的名称和 URL,点击添加后,应用将自动刷新使新添加的图标库生效。

image

图标使用方法

成功添加图标库后,魔笔平台中所有支持设置组件图标的地方将自动集成新添加的图标库。以按钮组件为例,在“选择 Icon”的 Tab 栏选中添加的三方图标库,即可为按钮设置自定义图标。

image

说明

Ant Design 是魔笔平台内置的默认图标库,添加三方图标库时请勿和 Ant Design 重名。

编辑/删除图标库

在设置 -> 图标库中可查看并管理已经添加的三方图标库,可对已添加图标库的名称或 URL 进行编辑,确保已添加的图标库不再使用时,可删除该图标库。

image

警告

在删除已添加的图标库前,请确认是否有组件正在使用该图标库。删除后,正在使用该图标库的组件图标将无法正常显示,且在魔笔平台左下角错误检查中会给出图标相关的错误提示,可据此定位错误使用图标的组件,删除错误图标使用或改用新图标。

若误删已添加的图标库,可按 Ctrl + Z (Windows) 或 ⌘ + Z (Mac) 撤销。

image

注意事项

  • URL 格式:确保引入的图标库是 iconfont 项目库提供的 URL 格式。

  • 性能考虑:三方图标库可能会增加应用的加载时间,魔笔平台支持最多添加5个图标库。

  • 许可和合规:请在 iconfont 中进行图标维护,确保了解并遵守图标版权等许可条款。