定制的扑图标 SVG 到图标字体系列

编程问答 2022-08-15

问题描述

我正在开发一个Flutter应用程序，为此，我需要将自己的徽标作为底部导航栏图标放置。我有自己的.svg文件以及徽标的图像文件（png，jpeg等），但是我不知道如何将其与其他材质的Icon一起用作底部导航栏（BNB）中的Icon。 现在，我在BNB中有4个图标，并想将App logo图标放在BNB的中心。 注意：我正在为android和ios平台构建应用程序。 enter image description here

解决方法

看看这个包：https://pub.dev/packages/flutter_svg

或使用https://www.fluttericon.com/制作自己的“本机”图标。

,

使用软件包flutter_svg，将小部件放在pickImage(sourceType) { const options: CameraOptions = { quality: 100,sourceType,destinationType: this.camera.DestinationType.DATA_URL,encodingType: this.camera.EncodingType.JPEG,mediaType: this.camera.MediaType.PICTURE,correctOrientation: true,}; this.camera.getPicture(options) .then((imageData) => { this.crop.crop(imageData,{quality: 100 }); this.serviceps.logo = 'data:image/jpeg;base64,' + imageData; },error => console.error('Error cropping image',error)); } 的{​​{1}}列表中

items
,

SVG 到图标字体系列

您可以使用 icon_font_generator 将 SVG 图标转换为图标字体系列。

  • 首先，确保将 SVG 图标复制到您的项目中，并遵循可以在包文档中找到的结构。
  • 要生成图标代码，请运行以下命令（它需要节​​点 js）：
$ flutter pub global activate icon_font_generator
$ export PATH="$PATH":"$HOME/Tools/flutter/.pub-cache/bin"
$ icon_font_generator --from=icons --class-name=Iconly --out-font=lib/src/icon_font/iconly.ttf --out-flutter=lib/src/widgets/icons.dart

这将生成以下文件：

lib/src/icon_font/iconly.ttf
lib/src/widgets/icons.dart

最终 pubspec.yaml 文件：

dev_dependencies:
  icon_font_generator: ^1.0.0

flutter:
  fonts:
    - family: Iconly
      fonts:
        - asset: lib/src/icon_font/iconly.ttf

用法：

var icon = const Icon(Iconly.outline2User);

enter image description here

注意：复杂的 SVG 文件可能存在错误渲染。

icons