图标管理方法、系统、电子设备和计算机可读存储介质与流程

本申请涉及图标管理领域，具体而言，涉及一种图标管理方法、系统、电子设备和计算机可读存储介质。

背景技术：

1、图标广义上是指有指向作用的标志，能够通过图形表达出所代表的对象的意义、特征以及信息；图标在信息系统中被广泛使用，常用于引导用户，标记信息或突出重点等，相比冗长的文字信息，图标可以让用户更加轻松的获取到自己想要的信息。

2、然而，当前的图标管理系统存在一些限制。目前的系统主要提供基础的图标下载服务，缺乏更多的功能和便利性。图标的维护也面临一定的挑战，且图标的更新比较滞后，导致用户无法及时获取到最新的图标资源，影响用户体验。

技术实现思路

1、本申请实施例的目的在于提供一种图标管理方法、系统、电子设备和计算机可读存储介质，通过对svg文件的处理，实现对图标分类管理和动态更新，提高了前端图标加载的效率，避免了不必要的资源加载，同时也为前端应用提供了更好的图标管理和定制能力。

2、第一方面，本申请实施例提供一种图标管理方法，该方法包括：获取目标svg文件对应的目标分类信息和目标图标名称信息；根据目标分类信息和目标图标名称信息，将目标svg文件对应的多个目标图标合并后压缩，并生成表征目标图标被合并和压缩后生成的js文件和目标图标之间的关联关系的映射文件；基于图标使用组件，动态加载映射文件，以管理目标图标。

3、在上述实现过程中，本申请提供的图标管理方法根据svg文件得到了关于图标和js文件之间关联关系的映射文件，在映射文件的基础上，使用icon组件可以按需加载和渲染图标，映射文件的设计有助于提高前端图标加载的效率，避免了不必要的资源加载，同时也为前端应用提供了更好的图标管理和定制能力。

4、可选地，在本申请实施例中，基于图标使用组件，动态加载映射文件，以管理目标图标，包括：获取动态加载的映射文件对应的更新图标，以及更新图标对应的更新图标名称；获取js文件对应的chunk文件；其中，js文件包括一个或多个chunk文件，chunk文件包括目标图标的目标图标名称和目标图标对应的svg结构；根据更新图标名称和目标图标名称，检索更新图标对应的chunk文件；根据更新图标对应的chunk文件，获取对应的svg结构；基于对应的svg结构，渲染更新图标。

5、在上述实现过程中，本申请提供的图标管理方法能够实时检测图标的变化或新图标的上传，保证了图标库中的图标是最新的图标。并且页面在加载时，不会加载所有图标的chunk文件，实现了图标的按需加载。由此可知，本申请提供的图标管理方法提供了一个灵活的图标管理方法，能够动态地响应图标的变化，并以最优化的方式加载和渲染图标，从而保持了图标库的最新性、提升了性能，并提供了更好的用户体验。

6、可选地，在本申请实施例中，在渲染更新图标之后，方法还包括：在更新图标对应的svg结构中添加使用标签，并储存更新图标。

7、在上述实现过程中，本申请实施例提供的图标管理方法通过使用<use>标签，系统能够复用已经定义的svg图形，避免在每次需要渲染图标时都重复嵌入相同的svg代码。定义了复用图标，避免了图标的重复加载，进而提高了页面性能。

8、可选地，在本申请实施例中，该方法还包括：基于目标用户的用户id，对目标用户进行身份验证；获取身份验证通过的目标用户对应的权限信息，并基于权限信息获取目标用户能进入的图标管理界面的子界面；其中，子界面包括使用子界面、编辑子界面和发布子界面。

9、在上述实现过程中，本申请实施例提供的图标管理方法给出了根据用户的身份和权限，实现不同用户可以进入不同子界面的图标管理系统。通过身份验证和权限控制，系统能够精确地管理用户访问和操作，提高了系统的安全性、用户体验和管理效率。

10、可选地，在本申请实施例中，在目标用户进入使用子界面的情况下，该方法还包括：获取目标用户输入的输入图标信息，并对输入图标信息进行渲染。

11、可选地，在本申请实施例中，在目标用户进入编辑子界面的情况下，该方法还包括：获取目标用户的修改操作，并渲染修改操作对应的svg文件；或获取目标用户的删除操作，并删除删除操作对应的目标图标。

12、可选地，在本申请实施例中，在目标用户进入发布子界面的情况下，该方法还包括：获取并显示使用子界面和/或编辑子界面的操作信息。

13、在上述实现过程中，基于不同用户的不同情况下的操作和相应的处理，能够实现图标的上传、修改、删除和发布等功能，实现了图标的动态更新和维护。

14、可选地，在本申请实施例中，在获取目标svg文件对应的目标分类信息和目标图标名称信息之前，该方法还包括：在图标管理界面，创建node服务和java服务；其中，java服务用于获取目标svg文件对应的目标分类信息和目标图标名称信息；node服务用于根据目标分类信息和目标图标名称信息，将目标svg文件对应的多个目标图标合并后压缩，并生成映射文件。

15、在上述实现过程中，本申请实施例提供的图标管理方法通过react构建前端用户界面，node.js和java服务处理后端逻辑和图标信息的提取、合并、压缩等操作。能够提高图标管理的效率，实现按需加载和渲染图标，从而优化用户体验。

16、第二方面，本申请实施例提供一种图标管理系统，该图标管理系统包括：映射关系生成模块和动态管理模块；映射关系生成模块用于获取目标svg文件对应的目标分类信息和目标图标名称信息；映射关系生成模块还用于根据目标分类信息和目标图标名称信息，将目标svg文件对应的多个目标图标合并后压缩，并生成表征目标图标被合并和压缩后生成的js文件和目标图标之间的关联关系的映射文件；动态管理模块用于基于图标使用组件，动态加载映射文件，以管理目标图标。

17、第三方面，本申请实施例提供一种电子设备，所述电子设备包括存储器和处理器，所述存储器中存储有程序指令，所述处理器读取并运行所述程序指令时，执行上述任一实现方式中的步骤。

18、第四方面，本申请实施例还提供一种计算机可读存储介质，所述可读取存储介质中存储有计算机程序指令，所述计算机程序指令被一处理器读取并运行时，执行上述任一实现方式中的步骤。

技术特征：

1.一种图标管理方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，基于图标使用组件，动态加载所述映射文件，以管理所述目标图标，包括：

3.根据权利要求2所述的方法，其特征在于，在所述渲染所述更新图标之后，所述方法还包括：

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

5.根据权利要求4所述的方法，其特征在于，在所述目标用户进入所述使用子界面的情况下，所述方法还包括：

6.根据权利要求4所述的方法，其特征在于，在所述目标用户进入所述编辑子界面的情况下，所述方法还包括：

7.根据权利要求4-6中任一项所述方法，其特征在于，在所述目标用户进入所述发布子界面的情况下，所述方法还包括：

8.根据权利要求1所述的方法，其特征在于，在所述获取目标svg文件对应的目标分类信息和目标图标名称信息之前，所述方法还包括：

9.一种图标管理系统，其特征在于，所述图标管理系统包括：映射关系生成模块和动态管理模块；

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序指令，所述计算机程序指令被一处理器运行时，执行权利要求1-8任一项所述方法中的步骤。

技术总结
本申请提供一种图标管理方法、系统、电子设备和计算机可读存储介质，涉及图标管理领域。该图标管理方法包括：获取目标SVG文件对应的目标分类信息和目标图标名称信息；根据所述目标分类信息和目标图标名称信息，将所述目标SVG文件对应的多个目标图标合并后压缩，并生成表征所述目标图标被合并和压缩后生成的JS文件和所述目标图标之间的关联关系的映射文件；基于图标使用组件，动态加载所述映射文件，以管理所述目标图标。使用本申请提供的图标管理方法能够极大程度地缩短图标加载的时间，实现了图标的分类管理和动态更新。

技术研发人员：梁勇,徐小平,熊学武,韦利东
受保护的技术使用者：泛微网络科技股份有限公司
技术研发日：
技术公布日：2024/1/16