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

46scxncf  于 2022-11-17  发布在  Flutter
关注(0)|答案(7)|浏览(185)

我正在制作一个自定义图标用于flutter应用程序。当我上传我的svg到customicon网站它显示我的错误**手动转换为复合路径如果图像看起来不像预期的请手动转换为复合路径。跳过的标签和属性:我也分享了它的截图。你能告诉我如何使用SVG制作我的自定义图标,为什么会出现这个错误吗?

vyswwuz2

vyswwuz21#

在此处上传您的SVG:
https://jakearchibald.github.io/svgomg/
它删除了字体不支持的SVG功能。下载它,然后上传它FlutterIcons。SVG正确呈现。

bweufnob

bweufnob2#

看起来https://www.fluttericon.com只能生成单一路径的svg。如果你有两个路径(你需要有两个路径才能有一个填充属性),它就不会工作。
此外,我使用的是https://material.io/resources/icons材质图标,似乎有些图标默认有边框,没有填充,因此不需要。
如果你有一个类似的svg文件,你可以删除边框路径,它将是所需的。
例如:
https://material.io/resources/icons下载的SVG(拖动指示器):

<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>

在一天结束的时候,如果你有一个边界路径(通常是这种情况),那么你可以删除它,它会工作得很好。

oyjwcjzk

oyjwcjzk3#

根据Iconmoon.app的建议,它也提供了将图标转换为字体并生成Flutter类的方法...

我将Figma提供的COCO图标转换为

  1. Download Inkscape(免费)
    1.准备工作区:添加svg项目(只需将所有svg文件拖放到Inkscape工作区),align and distribute,将颜色设置为黑色以使所有项目在白色背景下可见,放大工作区
    1.选择每个项目并将路径转换为笔划(路径→笔划到路径)
    1.选择每个项目并根据绘图或选择调整页面大小(文件→文档属性)或Ctrl+Shift+R,以普通SVG格式单独保存每个项目
    1.现在尝试再次导入fluttericonIconmoon.app
4ktjp1zp

4ktjp1zp4#

不支持某些SVG标记,例如
从路径中删除**styleclass**等标记

jfewjypa

jfewjypa5#

对于任何试图上传单个SVG而不是SVG字体的人来说,我可以通过首先转到https://icomoon.io,然后在底部选择“生成字体”来让它工作,然后你可以将字体文件夹中的SVG上传到FlutterIcon。

piv4azn7

piv4azn76#

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

6yoyoihd

6yoyoihd7#

我也有同样的问题,但我试图使用Inkscape导出图像似乎没有任何工作。
最后我尝试使用Illustrator指南,这里是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>

Illustrator输出

<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项目中使用它时,我得到了预期的结果。

希望它有助于有人解决紧迫的问题。

相关问题