flutter 应用程序的自定义图标显示手动转换为复合路径的错误

Question

我正在制作一个自定义图标以在 flutter 应用程序中使用。当我将 svg 上传到 customicon 网站时，它显示错误：手动转换为复合路径如果图像看起来不符合预期，请手动转换为复合路径。跳过标签和属性：填充。我还分享了它的屏幕截图。你能告诉我如何使用 svg 制作自定义图标以及为什么显示此错误吗？

Answer 1

在此处上传您的 SVG：

https://jakearchibald.github.io/svgomg/

它删除了不支持的字体 SVG 功能。下载它，然后上传 FlutterIcons。 SVG 正确渲染。

Answer 2

似乎https://www.fluttericon.com只能生成单路径svg。如果你有两条路径（你需要有两条路径才能有填充属性），它将不起作用。

此外，我使用的是来自https://material.io/resources/icons的材质图标，似乎有些图标默认有边框，但未填充，因此不需要。

如果你有一个类似的带边框的 svg 文件，你可以删除边框路径，它就会如你所愿。

例如；

从https://material.io/resources/icons下载svg（drag_indicator）：

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>

修改后的 svg 可以工作：

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>

最终，如果您有边界路径（通常是这种情况），那么您可以将其删除，它会正常工作。

Answer 3

遵循 Iconmoon.app 的建议，它还提供了将图标转换为 Font 并生成 Flutter 类的方法...

它对我来说可以转换 Figma 提供的 COCO 图标：

1. 下载 Inkscape（免费）
2. 准备工作区：添加 svg 项目（只需将所有 svg 文件拖放到 Inkscape 工作区中），对齐并分布，将颜色设置为黑色以使所有项目在白色背景上可见，放大工作区
3. 选择每个项目并将路径转换为描边（路径→描边到路径）
4. 选择每个项目并将页面大小调整为绘图或选择（文件 → 文档属性）或 Ctrl+Shift+R，以纯 svg 格式单独保存每个项目
5. 现在再次尝试导入 fluttericon 或 Iconmoon.app

Answer 4

试试这个：

pip3 install picosvg
picosvg in.svg > out.svg

Answer 5

例如，某些 SVG 标签不受支持

从路径中删除

style

和

class

等标签

Answer 6

对于任何努力尝试上传单个 svg 而不是 SVG 字体的人，我可以通过首先转到 https://icomoon.io 然后选择底部的“生成字体”来使其工作，然后您可以将 font 文件夹内的 svg 上传到 FlutterIcon 中。

Answer 7

如果您仍然遇到问题，只需将所有图标拖放到 Figma 中并再次导出所有图标，然后再次将它们上传到 FlutterIcon.com

Answer 8

我遇到了同样的问题，但我尝试使用 Inkscape 导出图像，但似乎没有任何效果。

最后我尝试使用 Illustrator guide，这里是 Figma 导出的

.svg

和 Illustrator 输出 (

svg

) 之间的比较。

Figma 导出

<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12.2002 5.1999C13.5282 5.1999 14.5922 4.1279 14.5922 2.7999C14.5922 1.4719 13.5282 0.399902 12.2002 0.399902C10.8722 0.399902 9.80019 1.4719 9.80019 2.7999C9.80019 4.1279 10.8722 5.1999 12.2002 5.1999ZM5.80019 5.1999C7.12819 5.1999 8.19219 4.1279 8.19219 2.7999C8.19219 1.4719 7.12819 0.399902 5.80019 0.399902C4.4722 0.399902 3.4002 1.4719 3.4002 2.7999C3.4002 4.1279 4.4722 5.1999 5.80019 5.1999ZM5.80019 6.7999C3.9362 6.7999 0.200195 7.7359 0.200195 9.5999V11.5999H11.4002V9.5999C11.4002 7.7359 7.66419 6.7999 5.80019 6.7999ZM12.2002 6.7999C11.9682 6.7999 11.7042 6.8159 11.4242 6.8399C12.3522 7.5119 13.0002 8.4159 13.0002 9.5999V11.5999H17.8002V9.5999C17.8002 7.7359 14.0642 6.7999 12.2002 6.7999Z" fill="#0A273E"/>
</svg>

插画输出

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#0A273E;}
</style>
<path class="st0" d="M63.6,70.4v11.4H0V70.4c0.4-8.8,14.5-15.9,31.8-15.9S63.2,61.6,63.6,70.4z M18.2,31.8c0,7.5,6.1,13.6,13.6,13.6
    s13.6-6.1,13.6-13.6s-6.1-13.6-13.6-13.6S18.2,24.3,18.2,31.8z M54.6,31.8c0,7.5,6.1,13.6,13.6,13.6s13.6-6.1,13.6-13.6
    s-6.1-13.6-13.6-13.6S54.6,24.3,54.6,31.8z M100,70.4c-0.4-8.8-14.5-15.9-31.8-15.9c-1.5,0-2.9,0.1-4.4,0.2c0.1,0,9,5.7,9,15.3
    c0,4.3,0,8.4,0,11.8H100V70.4z"/>
</svg>

** 请注意，即使在上传最终输出后，我仍然收到该错误通知，但是当我在 flutter 项目中使用它时，我得到了预期的结果。

希望它可以帮助某人解决紧急问题。

Answer 9

我在将 SVG 上传到 FlutterIcon 时遇到了这个问题，因此我事先创建了一个脚本来优化 SVG 文件。该脚本使用 Inkscape 并遵循此处概述的说明。

查看 GitHub 上的脚本：https://github.com/ibrahimEltayfe/refine_svg_script