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

Question

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

这里是最小化的截图，€-Icon居中，另一个（自定义）不是：

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 的“hacks”，以向 svg 添加另一个宽度等于高度的不可见路径，但没有成功。

最后我用FontForge（开源）打开了字体（.ttf），使图标居中，再次保存字体，它就起作用了。

这里是步骤，它可以节省别人的时间：

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