Flutter - Deformed/overflowing 使用 FlutterIcon.com 的自定义图标
Flutter - Deformed/overflowing custom icons using FlutterIcon.com
我使用 Flutter Icon 添加到我的项目中的一些自定义图标（确切地说是 11 个）。对于这些图标中的大多数，一切都按预期工作：
但是，其中一些只是超出了预期的大小，或者给定了错误的大小。不知道问题出在哪里，但看起来是这样的：
如您所见，无限循环的右侧刚好悬挂在其预期容器之外 (button)。另外，如果我尝试变黑，只调整无限图标的大小，它似乎向右偏移了。
我可以很笨拙地为几个麻烦的图标创建自定义大小，但我想知道我或我的设计师（也是我）是否可以做些什么来正确解决这个问题。
已经尝试过：
- 正在转换为复合路径。
- 删除不必要的标签，例如
<style> 标签。
- 使用 flutter_svg 包。这工作正常，但它的性能似乎不如 Flutter Icon 方法。我的应用程序同时有很多动画 运行，动画
SvgPicture 有点笨拙。
所以我没能找出为什么会出现这个问题，但我找到了如何解决它。
将自定义图标的 svg 上传到 FlutterIcon 后，您将下载一个 .zip 文件。这个文件包含一堆文件，包括一个 .ttf 文件，这是一个包含您的图标的字体文件。您需要操作该文件中的 symbols/icons 才能解决此问题。
要修改错误的符号，您需要下载一些字体编辑应用程序。 FontForge 可以解决问题。下载并打开您从 FlutterIcon 中获得的 .ttf 文件。打开它后，您会看到 window 个满是正方形的方块，其中有 X 个。这些是字体的字形。
您现在需要找到带有图标的字形。为了避免大量滚动，您可以从工具栏转到 Encoding -> Compact。这将隐藏所有未使用的（空的）字形。您现在应该能够看到所有图标。你应该有这样的东西：
- 右键单击要修复的符号，然后单击
Transform...。然后系统会提示您使用一个菜单，让您以任何您想要的方式转换符号。对所有有缺陷的图标应用变换，直到您满意为止。转换 window 看起来像这样：
- 完成所有修改后，进入
File -> Generate Font...。 Select 目标文件夹和文件名（确保它与从 FlutterIcons 生成的 .ttf 文件同名）。还要确保第一个下拉菜单中的 TrueType 文件类型：
- 完成后，点击生成，瞧！现在您有了带有 correctly-shaped 图标的
.ttf 文件。如果您仍然发现图标有问题，您可以冲洗并重复此过程，直到您对结果满意为止。
我使用 Flutter Icon 添加到我的项目中的一些自定义图标（确切地说是 11 个）。对于这些图标中的大多数，一切都按预期工作：
但是，其中一些只是超出了预期的大小，或者给定了错误的大小。不知道问题出在哪里，但看起来是这样的：
如您所见，无限循环的右侧刚好悬挂在其预期容器之外 (button)。另外，如果我尝试变黑，只调整无限图标的大小，它似乎向右偏移了。
我可以很笨拙地为几个麻烦的图标创建自定义大小，但我想知道我或我的设计师（也是我）是否可以做些什么来正确解决这个问题。
已经尝试过：
- 正在转换为复合路径。
- 删除不必要的标签，例如
<style>标签。 - 使用 flutter_svg 包。这工作正常，但它的性能似乎不如 Flutter Icon 方法。我的应用程序同时有很多动画 运行，动画
SvgPicture有点笨拙。
所以我没能找出为什么会出现这个问题，但我找到了如何解决它。
将自定义图标的
svg上传到 FlutterIcon 后，您将下载一个.zip文件。这个文件包含一堆文件，包括一个.ttf文件，这是一个包含您的图标的字体文件。您需要操作该文件中的 symbols/icons 才能解决此问题。要修改错误的符号，您需要下载一些字体编辑应用程序。 FontForge 可以解决问题。下载并打开您从 FlutterIcon 中获得的
.ttf文件。打开它后，您会看到 window 个满是正方形的方块，其中有X个。这些是字体的字形。您现在需要找到带有图标的字形。为了避免大量滚动，您可以从工具栏转到
Encoding -> Compact。这将隐藏所有未使用的（空的）字形。您现在应该能够看到所有图标。你应该有这样的东西：
- 右键单击要修复的符号，然后单击
Transform...。然后系统会提示您使用一个菜单，让您以任何您想要的方式转换符号。对所有有缺陷的图标应用变换，直到您满意为止。转换 window 看起来像这样：
- 完成所有修改后，进入
File -> Generate Font...。 Select 目标文件夹和文件名（确保它与从 FlutterIcons 生成的.ttf文件同名）。还要确保第一个下拉菜单中的TrueType文件类型：
- 完成后，点击生成，瞧！现在您有了带有 correctly-shaped 图标的
.ttf文件。如果您仍然发现图标有问题，您可以冲洗并重复此过程，直到您对结果满意为止。