如何将其添加到带有 svg 扩展名的图标？

Question

我想创建自己的图标。为此，我创建了带有扩展名的 CustomIcon。

extension CustomIcons on Icon {
  Icon get panelIcon =>Icon(
      icon: SvgPicture.asset("asset/svg/one.svg", semanticsLabel: 'One') ,
      color: Colors.red,
    );
     
}

}

我想以 Icon(Icons.panelIcon) 的形式使用我的 CustomIcon。我收到照片中的错误。我该怎么做？

Answer 1

我不太确定如何使用自定义图标扩展

Icon

小部件，但我建议这样做：

class CustomIcons {
  static Image panelIcon = Image.asset(
    'asset/svg/one.svg',
  );
}

然后您可以简单地通过调用来使用它：

CustomIcons.panelIcon;

Answer 2

一些需要知道的事情：

• icon

  类的参数

  Icon

  的类型为

  IconData?

  。

• IconData

  是字体字符而不是图像。它是“MaterialIcons”字体的一部分。

以下是实现它的步骤：

1. 延长

   Icons

   课程，而不是

   Icon

   。

2. 使用此网站使用您的 svg 图片创建自定义字体：https://icomoon.io/app

3. 在你的flutter项目资源中导入字体

4. 像这样编写代码

extension customIcons on Icons {
  static IconData panelIcon = const IconData(0x[CHARACTER_CODE], fontFamily: 'YourCustomIconFont');
}

注意： 您可以在 iconmoon.io 上轻松获得 CHARACTER_CODE。检查这个作为例子。 👇🏽