Flutter - 使用 FlutterIcon.com 变形/溢出的自定义图标
我使用 Flutter Icon 添加了一些自定义图标（确切地说是 11 个）。对于大多数这些图标，一切都按预期工作：
但是，其中一些文件只是超出了预期大小，或者给出了错误的大小。不知道问题是什么，但它看起来是这样的：
如您所见，无限循环的右侧只是悬挂在其预期容器之外（按钮）。另外，如果我尝试只调整无穷大图标的大小，它似乎会向右偏移。
我可以为这几个麻烦的图标创建一个自定义尺寸，但我想知道我或我的设计师（还有我）是否可以做一些事情来正确解决这个问题。
已经尝试过：
- 转换为复合路径。
- 删除不必要的标签，例如
- 使用 flutter_svg 包。这工作正常，但它的性能似乎不如 Flutter Icon 方法。我的应用程序同时运行相当多的动画，并且为
SvgPicture制作动画有点卡顿。
I have a few custom icons (11 to be exact) that I added to my project using Flutter Icon. For most of these icons, everything is working as expected:
However, some of them just overflow out of their intended size, or are given a wrong size. No idea what the problem is, but here is how it looks like:
as you can see, the right side of the infinity loop is just hanging outside of its intended container (button). Also, if I try to be hacky and resize only the infinity icon, it appears to be offsetted to the right.
I can be hacky and create a custom size for the couple of troublesome icons, but I would like to know if there is something that I, or my designer (also me) can do to fix this properly.
Already Tried:
- Converting to compound path.
- Removing unnecessary tags such as
<style>tags. - Using flutter_svg package. This works okay, but it seems to be less performant that the Flutter Icon method. My app has quite a few animations running at the same time, and animating a
SvgPictureis a little bit janky.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
因此，我无法找出问题发生的原因，但我找到了如何解决它。
将自定义图标的
svg上传到 FlutterIcon 后，您'将下载.zip文件。该文件包含一堆文件，其中包括.ttf文件，它是包含图标的字体文件。您将需要操作该文件中的符号/图标才能解决问题。要修改有问题的符号，您需要下载一些字体编辑应用程序。 FontForge 可以解决这个问题。下载它并打开从 FlutterIcon 获得的
.ttf文件。打开它后，您将看到一个充满方块的窗口，其中有X。这些是字体的字形。您现在需要找到带有图标的字形。为了避免大量滚动，您可以转到
Encoding ->从工具栏压缩。这将隐藏所有未使用的（空）字形。您现在应该能够看到所有图标。你应该有这样的东西：转换...。然后系统会提示您一个菜单，您可以通过该菜单以您想要的方式转换符号。对所有有问题的图标应用变换，直到您满意为止。变换窗口如下所示：File ->生成字体...。选择目标文件夹和文件名（确保它与 FlutterIcons 生成的.ttf文件同名）。另请确保第一个下拉菜单中的TrueType文件类型：.ttf文件。如果您仍然发现图标有问题，您可以冲洗并重复此过程，直到您对结果满意为止。So I haven't been able to find out why the problem is happening, but I found out how to fix it.
After uploading your custom icons'
svg's into FlutterIcon you'll download a.zipfile. This file contains a bunch of files, including a.ttffile, which is a font file that contains your icons. You will need to manipulate the symbols/icons in that file in order to fix the issue.To modify the faulty symbols, you will need to download some font editing application. FontForge does the trick. Download it and open the
.ttffile you got from FlutterIcon from it. Once you have it open, you'll see a window full of squares withXs in them. These are the font's glyphs.You now need to find the glyphs with your icons. To save yourself from a LOT of scrolling, you can go to
Encoding -> Compactfrom the toolbar. This will hide all unused (empty) glyphs. You should now be able to see all your icons. You should have something like this:Transform.... You will then be prompted with a menu that will let you transform the symbol in anyway you want. Apply transforms on all your faulty icons until you are satisfied. Transform window looks like this:File -> Generate Font.... Select the destination folder and the file name (make sure it has the same name as the.ttffile generated from FlutterIcons). Also make sure you theTrueTypefile type from the first dropdown menu:.ttffile with the correctly-shaped icons. If you still find that something is wrong with the icons, you can rinse and repeat this process until you're satisfied with the result.我建议使用 fontify。它就像一个魅力。还有一个视频，我解释了如何修复在 Flutter 中的自定义字体图标中出现混乱的损坏的 SVG。
I suggest using fontify. it works like a charm. there is also a video that I explained how to fix corrupted SVGs that appear messed up in our custom font icons in Flutter.