[发明专利]一种图标自动化生成和管理的方法及系统

说明书

本申请涉及网站项目工程管理技术领域，公开了一种图标自动化生成和管理的方法、存储介质及电子设备，包括：获取设计软件中的图标管理文件里的所有图标数据；获取网站工程代码仓库的图标数据文件；将所有图标数据和图标数据文件进行diff计算；通过GitLab API提交变化的图标数据；根据变化的图标数据对图标数据文件进行更新，并触发GitLab CI，将更新后的图标数据文件通过仓库的脚本生成新的图标组件；通过Shell命令将所述新的图标组件发布到NPM仓库，采用本申请的方法，只要设计师有Figma账号就可以，更新图标时，只需要设计师进行发布；通过SVG的方式绘制图标，不会像出现锐化、糊等失真的情况，SVG可以做到按需打包。

技术领域

本申请涉及网站项目工程管理技术领域，尤其是一种图标自动化生成和管理的方法及系统。

背景技术

随着信息产业的迅速发展各种计算机业务系统的日渐复杂，网站项目工程管理的重要性也在逐渐凸显，如果缺失协同工具、标准流程来辅助项目建设，随着项目的不断迭代，管理、维护成本会日益上升。

在网站的每个网页中都会显示网站的图标，网站的图标通常需要定期进行维护，例如：修改、新增或删除图标。图标的实现是网站工程中的一部分，在目前的开发流程中，通常有以下两种方案来实现网站工程中的图标：

方案一：将多个图标图片合成一个图片，利用CSS的background-position定位显示不同图标。

方案一中的图标管理方法带来一个很严重的问题：维护困难。每新增一个图标，都需要改动原始图片，这很容易影响早先定位好的图标，而且修改后，合并后的图片缓存就会失效，页面需要重新请求合并后的图片资源。

方案二：基于iconfont进行管理的方法。iconfont是阿里巴巴开源图标库，设计师登录iconfont后可以搜索想要的图标并添加至购物车，购物车中的图标可以添加至项目。基于此，研发团队与设计团队可以在iconfont上建企业级或项目级的图标库，图标库可生一个完成的iconfont包，图标资源也只需要加载一次。基于iconfont进行管理的流程如图1所示。

方案二中的图标管理方法也有一些缺陷：

1.需要前端工程师和设计师都要有iconfont账号，每次更新都需要登录、上传和下载，项目挂载在单个用户账号上，离职交接容易遗漏；

2.iconfont包是一个完整的文件，每次必须全量加载，项目中图标越多，文件越大，首次访问页面的加载速度就会越慢；

3.该方法以字体的方式加载图标，有的分辨率下会出现锐化、糊等失真的情况；

4.一个项目中不能存在多个iconfont包，如果存在会产生图标错乱。

发明内容

本申请的目的在于克服现有技术不足之处，提供一种图标自动化生成和管理的方法及系统。

第一方面，提供了一种图标自动化生成和管理的方法，包括：

获取设计软件中的图标管理文件里的所有图标数据，其中，图标数据指图标的命名以及图标的SVG；

获取网站工程代码仓库的图标数据文件；

将所有图标数据和图标数据文件进行diff计算，以计算出变化的图标数据；

通过GitLab API提交变化的图标数据；

根据变化的图标数据对图标数据文件进行更新，并触发GitLab CI，将更新后的图标数据文件通过仓库的脚本生成新的图标组件；

通过Shell命令将所述新的图标组件发布到NPM仓库，以使得网站工程可以引用新的图标组件。