蓝湖SVG上传Iconfont阿里图标库部分元素缺失问题分析与解决方案

作为前端开发者，使用矢量图标库是日常工作中不可或缺的一部分。本文将详细介绍如何将蓝湖（Lanhu）导出的SVG文件成功上传至阿里图标库（Iconfont），并解决过程中遇到的问题。

一、SVG文件导出

蓝湖上下载切图 选择svg 就可以把svg文件导出来

二、上传svg到图标库

1. 登录阿里图标库(https://www.iconfont.cn/)
2. 进入"我的项目" → "上传图标"
3. 选择优化后的SVG文件
4. 填写图标名称和分类
5. 点击"确定"完成上传

如上图，点击顺序是1 -> 2

三、遇到的问题

1. 把导出的svg文件，上传到iconfont 图标库，发现部分图标实际的样子跟svg是不一样的，比如下面的对比图
   图1：
   图2：

图1 是原图的样子，图2 是上传到图标库的样子，发现，边框没了

三、问题分析

1. 轮廓化描边处理

下图是iconfont 对图标绘制规则的要求：

我这次遇到的问题是： 轮廓化

问题原因：阿里图标库不支持描边(stroke)属性，只识别填充(fill)路径，需要对图标进行轮廓化处理。

四、解决方案：

• Adobe Illustrator：

  1. 选中描边对象
  2. 菜单栏 → 对象 → 路径 → 轮廓化描边(Shift+Ctrl+O)

• Sketch：

  1. 选中描边对象
  2. 菜单栏 → 图层 → 轮廓化(Shift+Cmd+O)

• Figma：

  1. 选中描边对象
  2. 右键 → Outline Stroke

这些事可以跟UI同学说下， 让UI同学处理，或者前端可以自己处理，这里介绍下用Sketch如何处理

五、Sketch处理图标轮廓化

1. 把有问题的svg文件直接拖到sketch项目中

2. 按住command键不放手，鼠标移到图标上，发现改图标的边框是一条线，这就证明图标的边框现在是描边，点击选中

3.点击导航栏的图层，点击轮廓化

4.在按住command键不放手，鼠标移到图标上，发现之前的线条消失了，代表描边已经改为填充了

5.选中整个图标，右边菜单点击 导出按钮，选择svg格式，导出即可

6.把新导出的svg上传到图标库，发现没问题了，完美

六、其他

上面的图标关于描边和填充的对比 可能体现的还不够明显，看下面这个图标的对比

左边的图，中间的竖线就是描边，按住command 鼠标移上去，就值一条线，这个图标上传到图标库，中间这条线就不会显示，需要进行轮廓化处理
右边的图 就是经过轮廓化处理后的样子，可看到不是一条线了，而是填充的一个长条，这样就能被iconfont识别

七、总结

其实大部分情况下，蓝湖上导出的svg文件，上传到iconfont 不能识别，都是描边导致的，轮廓化处理下就可以了，还有少数情况是图形没有闭合，按照阿里图标库的要求逐一排查就可以

八、用到的svg文件都传到git上了

地址： https://github.com/YalongYan/svg2iconfont