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

Question

我正在制作一个自定义图标以在颤振应用程序中使用。当我将我的 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 类的方法...

\n

\n

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

\n

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

\n

Answer 4

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

从路径中删除类似 和 的style标签class