如何使用svg扩展名将其添加到Icon中？

How can I add it to Icon with svg extension?

提问人：developer new 提问时间：10/26/2023 最后编辑：developer new 更新时间：10/26/2023 访问量：43

问：

我想创建自己的图标。为此，我创建了带有扩展名的 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。我在照片中出现错误。我该怎么做？

在此处输入图像描述

Flutter SVG 图标 扩展方法

评论

0赞 Dhafin Rayhan 10/26/2023
1） 与 不同。2）你平时使用的图标，比如，是类的静态成员，你不能对它做扩展。3）是一个小部件，你不能把它放在里面。4） 作为其第一个位置参数。没有命名参数。IconIconsIcons.personIconsSvgPicture.assetIconIconIconDataicon
0赞 Dhafin Rayhan 10/26/2023
您可能想通过查看此包的源代码来了解如何实现自己的代码：pub.dev/packages/material_symbols_iconsIconData

答：

0赞 Texv 10/26/2023 #1

我不太确定如何使用自定义图标扩展小部件，但这就是我建议的方法：Icon

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

然后，您可以通过调用以下命令简单地使用它：

CustomIcons.panelIcon;
0赞 Nehemie KOFFI 10/26/2023 #2

需要知道的几件事：

  • class 的参数类型为 。iconIconIconData?
  • IconData是字体字符，而不是图像。它是“MaterialIcons”字体的一部分。

enter image description here

以下是实现它的步骤：

  1. 对 class 进行扩展，而不是 .IconsIcon

  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。以此为例进行检查。👇🏽

上一个：如何从 Intellisense 中删除 LINQ 扩展方法？

下一个：Extension Class 只能访问一个方法 [已关闭]