【技术实现步骤摘要】
本专利技术涉及软件开发，具体涉及一种svg图标库的搭建方法。
技术介绍
1、软件开发过程中，图标已经成为不可或缺的一部分，传统的软件开发是设计师将图标切成png或jpg格式的图片交付给开发人员，开发人员将图片放在静态资源文件夹下来调用，然而这样的方式存在以下几个缺点：图标尺寸规范问题，设计师给的图标尺寸如果不规范(某些情况下需要尺寸完全一致)需要和设计师沟通重新修改；有时存在设计者给的图片名称不规范(可能包含中文),开发人员要一一修改,操作变得繁琐；由于要适配不同的分辨率的设备,图片图标的资源可能需要不同尺寸,譬如在ios项目中，一般图片资源要求有@2x,@3x两套；同一颜色不同尺寸和同一尺寸不同颜色的图标需求都需要设计者重新出图；对于那些有换肤功能要求的app来说,还需要多套图来匹配不同的主题，这样不但无形中增加了开发者和设计者的工作量,而且会增大app的体积，图标用过之后无法留存，如果要复用还需要大量翻找。
2、因此，针对上述问题，需要提出一种新型的图标库搭建方法。
技术实现思路
1、本专利技术的目的在于，针对上述现有技术的不足，提供一种svg图标库的搭建方法，以解决图标库的搭建问题。
2、为实现上述目的，本专利技术采用的技术方案如下：
3、本专利技术提供了一种svg图标库的搭建方法，该方法包括：
4、步骤a、搭建nodejs服务；
5、步骤b、在根目录下新建目录svgfiles，用来存放.svg文件；
6
7、步骤d、在nodejs服务中添加打包程序接口；
8、步骤e、搭建前端展示平台；
9、步骤f、前端展示平台通过步骤c的接口获取到文件夹及图标信息，以在页面上展示图标库信息；
10、步骤g、前端展示平台添加打包按钮和是否去除内置颜色勾选框，在点击打包按钮时调用步骤d中的打包程序接口并发送是否去除内置颜色的参数，以下载打包生成的.zip文件。
11、可选地，步骤c包括：使用nodejs服务中的fs读取文件夹内容；
12、循环判断读取的内容是否是文件，并剔除隐藏文件；
13、将文件转为utf-8，发送给前端展示平台接收。
14、可选地，步骤d包括：使用gulp工具读取svgfiles下指定的.svg文件；
15、安装gulp-svg-symbols工具，并修改源代码，增加是否去除内置颜色的参数；
16、修改gulp-svg-symbols工具下的模板文件，判断是否需要去除内置颜色，是则全局替换svg下所有标签的class为空，否则不改变；
17、使用gulp-svg-symbols工具根据所选svg内容生成.svg文件、.scss文件、.vue文件，如果是vue项目则直接使用.vue文件，其他项目则使用.svg文件和.scss文件；
18、使用gulp-rename工具将文件名称改为自定义名称；
19、使用gulp.zip方法将文件打包成.zip文件，并存放在指定目录；
20、将打包文件转为文件流，发送给前端展示平台接收。
21、本专利技术的有益效果包括：
22、本专利技术提供的svg图标库的搭建方法包括：步骤a、搭建nodejs服务；步骤b、在根目录下新建目录svgfiles，用来存放.svg文件；步骤c、添加获取步骤b中新建的目录svgfiles下的文件夹及图标接口；步骤d、在nodejs服务中添加打包程序接口；步骤e、搭建前端展示平台；步骤f、前端展示平台通过步骤c的接口获取到文件夹及图标信息，以在页面上展示图标库信息；步骤g、前端展示平台添加打包按钮和是否去除内置颜色勾选框，在点击打包按钮时调用步骤d中的打包程序接口并发送是否去除内置颜色的参数，以下载打包生成的.zip文件。与现有图标库相比，本申请的方法更简单易搭，也能使设计师的设计成果得到积累，使用便利的同时也使图标资源更加小，减少了软件的加载时间。
本文档来自技高网...【技术保护点】
1.一种SVG图标库的搭建方法，其特征在于，所述方法包括：
2.根据权利要求1所述的SVG图标库的搭建方法，其特征在于，所述步骤c包括：使用nodejs服务中的fs读取文件夹内容；
3.根据权利要求1所述的SVG图标库的搭建方法，其特征在于，所述步骤d包括：使用gulp工具读取svgFiles下指定的.svg文件；
【技术特征摘要】
1.一种svg图标库的搭建方法，其特征在于，所述方法包括：
2.根据权利要求1所述的svg图标库的搭建方法，其特征在于，所述步骤c包括：使用nodejs服务中...
【专利技术属性】
技术研发人员：陈亮亮，
申请(专利权)人：上海工业自动化仪表研究院有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。