自定义 SVG 字体图标未在图标小部件中居中

Question

我正在使用材质设计图标作为浮动操作按钮。 现在我想使用自定义图标。我使用 Flutter-Icon-Generator (http://fluttericon.com/) 从 SVG 文件生成了一种字体。一切都很顺利，但图标未居中。

这里是最小化的屏幕截图，欧元图标居中，另一个（自定义图标）不是居中：

FloatingActionButton对应的代码是：

  Widget money() {
    return Container(
      child: FloatingActionButton(
        backgroundColor: widget.openColor,
        elevation: 0,
        heroTag: "btn_money",
        onPressed: () {
          widget.onPressed(DashboardFabAction.AddMoney);
          animate();
        },
        tooltip: 'Money',
        child: Icon(Icons.euro_symbol, color: widget.iconColorOpen,),
      ),
    );
  }

  Widget eggs() {
    return Container(
      child: FloatingActionButton(
        backgroundColor: widget.openColor,
        elevation: 0,
        heroTag: "btn_eggs",
        onPressed: () {
          widget.onPressed(DashboardFabAction.AddEggs);
          animate();
        },
        tooltip: 'Eggs',
        child: Icon(CustomIcons.egg, color: widget.iconColorOpen,),
      ),
    );
  }

CustomIcons 的代码是：

import 'package:flutter/widgets.dart';

class CustomIcons {
  CustomIcons._();

  static const _kFontFam = 'CustomIcons';

  static const IconData egg = const IconData(0xe800, fontFamily: _kFontFam);
}

pubspec.yaml 在这里并不有趣，因为我在那里得到了正确的图标。

提前感谢您的回答！

Answer 1

我找到了这个问题的答案。问题是 svg-path 的高度大于宽度。我尝试使用 inkscape 进行一些“黑客”操作，以向 svg 添加另一个宽度等于高度的不可见路径，但没有成功。

最后我用FontForge（开源）打开字体（.ttf），将图标居中，再次保存字体，然后就成功了。

以下是步骤，可能会节省一些人的时间：

1. 在 FontForge 中打开字体
2. 点击“View - Goto”并输入图标地址（在我的例子中是0xe800）
3. 双击您的图标打开编辑器
4. 指标 - 宽度居中
5. 关闭编辑器
6. 文件 - 生成字体
7. 输入您想要的名称并选择 TrueType 作为字体格式
8. 点击生成
9. 会出现一些对话框，其中包含警告和修复某些内容的建议 - 只需单击“是”或一直查看
10. 如果弹出一个带有您的图标名称的窗口 - 双击它并修复即将弹出的问题
11. 完成 - 在使用新字体之前不要忘记

    flutter clean

Answer 2

这对我很有帮助，在 FlutterIcons 中生成之前，SVG 文件中的文档尺寸是相同的（宽度 = 高度），并且插图居中。