一种图标自动化生成和管理的方法及系统技术方案

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

【技术实现步骤摘要】
一种图标自动化生成和管理的方法及系统


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

技术介绍

[0002]随着信息产业的迅速发展各种计算机业务系统的日渐复杂，网站项目工程管理的重要性也在逐渐凸显，如果缺失协同工具、标准流程来辅助项目建设，随着项目的不断迭代，管理、维护成本会日益上升。
[0003]在网站的每个网页中都会显示网站的图标，网站的图标通常需要定期进行维护，例如：修改、新增或删除图标。图标的实现是网站工程中的一部分，在目前的开发流程中，通常有以下两种方案来实现网站工程中的图标：
[0004]方案一：将多个图标图片合成一个图片，利用CSS的background
‑
position定位显示不同图标。
[0005]方案一中的图标管理方法带来一个很严重的问题：维护困难。每新增一个图标，都需要改动原始图片，这很容易影响早先定位好的图标，而且修改后，合并后的图片缓存就会失效，页面需要重新请求合并后的图片资源。
[0006]方案二：基于iconfont进行管理的方法。iconfont是阿里巴巴开源图标库，设计师登录iconfont后可以搜索想要的图标并添加至购物车，购物车中的图标可以添加至项目。基于此，研发团队与设计团队可以在iconfont上建企业级或项目级的图标库，图标库可生一个完成的iconfont包，图标资源也只需要加载一次。基于iconfont进行管理的流程如图1所示。
[0007]方案二中的图标管理方法也有一些缺陷：
[0008]1.需要前端工程师和设计师都要有iconfont账号，每次更新都需要登录、上传和下载，项目挂载在单个用户账号上，离职交接容易遗漏；
[0009]2.iconfont包是一个完整的文件，每次必须全量加载，项目中图标越多，文件越大，首次访问页面的加载速度就会越慢；
[0010]3.该方法以字体的方式加载图标，有的分辨率下会出现锐化、糊等失真的情况；
[0011]4.一个项目中不能存在多个iconfont包，如果存在会产生图标错乱。

技术实现思路

[0012]本申请的目的在于克服现有技术不足之处，提供一种图标自动化生成和管理的方法及系统。
[0013]第一方面，提供了一种图标自动化生成和管理的方法，包括：
[0014]获取设计软件中的图标管理文件里的所有图标数据，其中，图标数据指图标的命名以及图标的SVG；
[0015]获取网站工程代码仓库的图标数据文件；
[0016]将所有图标数据和图标数据文件进行diff计算，以计算出变化的图标数据；
[0017]通过GitLab API提交变化的图标数据；
[0018]根据变化的图标数据对图标数据文件进行更新，并触发GitLab CI，将更新后的图标数据文件通过仓库的脚本生成新的图标组件；
[0019]通过Shell命令将所述新的图标组件发布到NPM仓库，以使得网站工程可以引用新的图标组件。
[0020]进一步的，在获取设计软件中的图标管理文件里的所有图标数据时，对所有图标数据进行自动审核。
[0021]进一步的，所述自动审核包括：
[0022]在设计软件中创建一个图标管理文件；
[0023]约定图标命名规范以及绘制的规范；
[0024]遍历设计软件中的图层，以获得类型为component的所有图层；
[0025]用正则校验图层命名，缓存遍历过的图标，比较是否出现重名，图标变更提交失败，并查验图标绘制方式是否符合规范；
[0026]若出现重名或图标绘制方式不符合规范，则审核不通过，图标变更提交成功，并输出审核不通过的原因；
[0027]若未出现重名且图标绘制方式符合规范，则审核通过。
[0028]进一步的，通过md5算法对获取到的图标管理文件中所有图标数据进行加密处理。
[0029]进一步的，所述变化的图标数据包括新增的、更新的和删除的图标。
[0030]进一步的，将所有图标数据和图标数据文件进行diff计算，包括：
[0031]第一轮遍历所有图标数据和图标数据文件，识别出新增的图标或更新的图标；
[0032]第二轮遍历所有的图标数据和图标数据文件，识别出删除的图标。
[0033]进一步的，所述生成新的图标组件包括以下步骤：
[0034]设置一个生成图标的模板；
[0035]遍历更新后的图标数据文件逐个根据模板将读取到的SVG生成新的图标组件。
[0036]可选的，还包括：通过钉钉的webhook发送钉钉群消息，以通知图标已经更新。
[0037]第二方面，提供了一种计算机可读存储介质，所述计算机可读介质存储用于设备执行的程序代码，该程序代码包括用于执行如第一方面中的任意一种实现方式中方法的步骤。
[0038]第三方面，提供了一种电子设备，所述电子设备包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如第一方面中的任意一种实现方式中的方法。
[0039]本申请具有如下有益效果：采用本申请的方法，只要设计师有Figma账号就可以，开发者不需要有Figma账号，也不需要登录Figma上传和下载文件；更新图标时，只需要设计师进行发布，不需要额外的人为参与；通过SVG的方式绘制图标，SVG是矢量的，不会像出现锐化、糊等失真的情况，另外，SVG可以做到按需打包，打包的时候通过tree
‑
shaking优化资源请求，性能更好。
附图说明
[0040]构成本申请的一部分的附图用于来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。
[0041]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0042]图1是
技术介绍
中方案二的基于iconfont进行对图标进行管理的方法的流程图；
[0043]图2是本申请实施例一的图标自动化生成和管理的方法的流程图；
[0044]图3是本申请实施例一的图标自动化生成和管理的方法的流程架构图；
[0045]图4是本申请实施例一的图标自动化生成和管理的方法中英文大驼峰命名的示意图。
具体实施方式
[0046]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本专利技术保护的范围。
[0047]实施例一
[0048]本申请实施例本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种图标自动化生成和管理的方法，其特征在于，包括：获取设计软件中的图标管理文件里的所有图标数据，其中，图标数据指图标的命名以及图标的SVG；获取网站工程代码仓库的图标数据文件；将所有图标数据和图标数据文件进行diff计算，以计算出变化的图标数据；通过GitLab API提交变化的图标数据；根据变化的图标数据对图标数据文件进行更新，并触发GitLab CI，将更新后的图标数据文件通过仓库的脚本生成新的图标组件；通过Shell命令将所述新的图标组件发布到NPM仓库，以使得网站工程可以引用新的图标组件。2.根据权利要求1所述的图标自动化生成和管理的方法，其特征在于，在获取设计软件中的图标管理文件里的所有图标数据时，对所有图标数据进行自动审核。3.根据权利要求2所述的图标自动化生成和管理的方法，其特征在于，所述自动审核包括：在设计软件中创建一个图标管理文件；约定图标命名规范以及绘制的规范；遍历设计软件中的图层，以获得类型为component的所有图层；用正则校验图层命名，缓存遍历过的图标，比较是否出现重名，图标变更提交失败，并查验图标绘制方式是否符合规范；若出现重名或图标绘制方式不符合规范，则审核不通过，图标变更提交成功，并输出审核不通过的原因；若未出现重名且图标绘制方式符合规范，则审核通过。4.根据权利要求1所述的图标自动化生成和管理的方法，其特征在于...

【专利技术属性】
技术研发人员：刘永贵，罗丹，周雁，
申请(专利权)人：杭州易知微科技有限公司，
类型：发明
国别省市：