这是2022年的第一篇，去年的100篇原创目标只完成了34%，离目标还是有不小的距离，下次再找个时间聊聊
不过梦想还在，所以今年要继续加油了
今天分享的这个问题是最近在工作中遇到的一个问题，当时可把我给难住了，想着分享出来作为一个案例，也希望能够帮助到大家
是这样的，从Figma导出SVG格式的图标，然后再上传到iconfont上，这不就出问题了
咱们先看下设计好的图标
上传上去之后
这么上传上去肯定是不能用的，也不是我想要的结果，之前也没有遇到类似的情况
当时第一反应就在想是不是没有按照iconfont上传的规则来做
经过反复的对照和调整，该合并的合并，转曲的转曲，甚至还放到AI里去做了调整，最后还是不行，于是就排除了这个可能性
那么还有一个可能就是Figma本身的问题
不知道你们有没有遇到这个问题，又是如何解决的？
最后我是通过一个插件解决了这个问题，这个插件叫【Fill Rule Editor】
可以复制过去在Figma社区直接搜，文末也有给出这个插件的链接
先来看下用了插件之后的结果吧，这样才是没有问题的
我们再来简单的说一下这个插件如何使用的问题
第一步：安装好插件，Figma安装插件效率是非常高的，点下就安装成功了
看下这个插件长啥样，不要安装错了，我这里是已经安装好的
第二步：把需要上传到iconfont的图标转曲，也就是轮廓化描边（快捷键：Ctrl+Shift+O）
这一步可能会有人不太明白，为啥要轮廓化？
确实！图标轮廓化之后是不可逆的，设计师一般都不会这么去做，因为难免后面会去做调整啥的
但是，要解决以上问题就得用到前面提到的插件，而要想使用这个插件就得满足2个前提
第1个前提：就是图标需要轮廓化，这就和iconfont的规则是不谋而合的
第2个前提：需要选择图标本身，选择frame和Group都不行
所以当打开插件出现以下这种状态，那就是还没有触发，然后看下是不是没有同时满足以上2个前提
这里自查一下就好了！
第三步：选中单个轮廓化好的图标，然后开始一个一个的调整
为了照顾一下英文不那么好的同学，这里再写的详细一点
我们选择一个之后，你会发现插件上会出一个相同图标，但是给了一个谈黄色的斑马样式，这是可以直接在上面操作的
我们点击一下谈黄色，马上就会变成蓝色的，这时问题就出现了，图标和插件上的，上半部分都不是镂空的，那怎么解决？
这个时候只需要点击插件上的线，红色框着的线，其实去尝试一下就会发现，被点击线的颜色会深很多，而未点击的是灰色的
这里注意不要点到蓝色了，不然又变回谈黄色了
还记得最开始上传到iconfont上这个图标出现的问题吗，我们一起来对比看下
这么一对比是不是很快就明白这个插件厉害的地方了
最后总结一下
1、把谈黄色变成蓝色
2、没有镂空的区域则点击该区域的线进行转换
这么做一个还算比较效率，多了那就是一个不小的工作量
好了，今天的分享到这就结束了，如果有看不懂的或者有问题的地方，可以在后台获取橙心的个人微信来聊聊
