Figma 图标上传 iconfont 显示错误问题解决方案
作者：新像素UI教育
来源：新像素UI教育
发布日期：2023年06月13日
先看视频，再看笔记。 这几天在看周刊的时候，发现了一篇文章，...
先看视频，再看笔记。 这几天在看周刊的时候，发现了一篇文章，提到了 导出 的问题，这个问题相信有不少同学都遇到过，就是在 里面画好的线性图标上传到 之后就变成了面性填充。
文章还提供了两个方法，但是两个方法都要用到插件，分别是 和 插件。 主要是优化代码，修改属性，不过这个方法我试了一下，是没有任何区别的。没有区别不代表没有用，所以如果你们团队里面开发出来的图标有问题，或者放到哪儿有问题，都可以来尝试一下这篇文章里面的方法。
还有一种方法是借助 插件，在使用插件之前，我们要先把我们的图标转曲，正常情况下我们的图标是分层的，这个时候，选择我们的图标鼠标右键，选择 ，或者按快捷键 ，这样就把图标转曲了。如果你的图标都是组件库的话，要去原始组件里面操作。
转曲之后，按快捷键 在插件里面搜索 ，汉化的和英文版本选择其中一个打开即可。
打开插件之后，我们选择图标，可以发现插件上会出现一个相同的图标，我们点击一下浅黄色的区域，图标会变成全蓝色。其实，现在这个时候的样式就是我们上传到 之后的样式。
接下来，我们点击黑色的线调整成我们想要上传到 之后的样式，最后再导出 svg 上传到 iconfont 就可以了。
到这里插件的使用教程就讲完了，总得来说还是挺简单的，但是我这里提醒一下，并不是说所有的图标都要这么操作，因为我觉得每一个都操作一下太麻烦了，还有就是我们也要尽量保持图标的可编辑性，所以建议大家在导出图标给开发使用或者上传到哪个网站的时候，把出现问题的图标调整一下就可以了。
