前言
我一直比较喜欢阿里巴巴提供的一些组件服务。这里只讲一下图标管理。后来我就用了我之前开发的www.iconfont.cn/。当时，这些小图标被简化为单个图像（技术上称为精灵图像），以减少图像请求并提高网站性能。后来又开发了前端字体。添加了图标。让我们回到主题，不谈细节。上次，icofont官方网站宕机了，所以项目无法正常运行，所以我决定自己创建一个简单的图标管理器。
需求
通常，您只需将自己设计的图标，或者从其他地方下载的svg图标上传到服务器上进行展示，打包成js文件，加载到您的项目中即可。
准备
据说全世界都在大量复制文章，所以我就打开了一个iconfont使用方法的demo，尝试研究了一下。
这里仅对符号进行说明。通过分析，我们发现我们的项目需要引入./iconfont.js。
iconfont已删除并优化了上传的图标。最外层是一个svg 标签，它使用符号标签包裹了前面的图标内容。每个符号的ID 对应于之前的svg 图标名称。
Iconfont 不是开源的。目前我还不知道具体的方法。现在您所要做的就是根据您的理解开始开发和实施它。
前端开发
从上面我们可以看出，我们在前端需要做的就是将设计稿的SVG图像转换为符号的内容。您只需打开SVG 图像并直接复制粘贴即可进行测试。如果将内容复制到iconfont.js中，并且运行demo中的图标显示正确，则没有问题。否则它不会像这样工作。
从该图中您可以看到，在开发过程中，您需要更改svg 中的路径并将其包装在symblo 中。这时，你就需要通过文档流上传svg图片。文档流。先将文档流转为字符串，然后用js拼接字符串即可达到目的。
使用FileReader 和readAsText 获取字符串。 const fileParse=(file)={ return new Promise((resolve)={ const fileReader=new FileReader(); fileReader.readAsText(file, 'UTF-8'); fileReader.onload=(e)={solve({ content: e.target?result, name: file.name }) } }) } 对于拼接字符操作，使用cheerioconst handleUploadSvg=($, result)={ letindex=result.indexOf( 'svg'); slice(index); const svgNode=$('svg').attr('viewBox', svgNode.attr('viewBox')); if (!findPath.length); ('图标错误，路径不存在') return '' }; const gDom=svgNode.find('g'); { const path=$(el).children('path'); const fill=$(el).attr('fill'); if (fill fill !=='none' path.length !$(path [0 ])?attr?('fill')) { $( path[0])?attr?('fill', fill) } });moveArrtId($, gDom); if (gDom.length) { $('svg').html(svgNode.html()); } else { $('svg').html(svgNode.find('path')); } return $.html('svg' ) }通过以上操作，就可以得到新的svg源码了。图标显示保持不变
然后只需将此字符串发送到您的后端即可。
后端开发
后端需要做的就是连接上传的svg字符串并通过iconfont.js等get接口返回。如果您可以从浏览器访问它，那就没有问题。
另外两个需要使用第三方库。如果有需要的话，我当时就查了一下。
版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。