定制的颤振图标

Question

I am developing a flutter application, for which I need to put my own logo as a Bottom Navigation Bar Icon. I have my own .svg file as well as an image file(png, jpeg, etc) of my logo, but I don't know how to use it as Icon in the bottom nav bar(BNB) with other material Icon. For now, I have 4 icons in BNB and want to place the App Logo icon in center of BNB. Note: I am building the app for android as well as ios platform. enter image description here

Answer 1

Take a look at this package: https://pub.dev/packages/flutter_svg

Or use https://www.fluttericon.com/ to make your own "native" icons.

Answer 2

using package flutter_svg , put the widget inside yout items list in BottomNavigationBar

    BottomNavigationBarItem(
          icon: SvgPicture.asset('assets/images/logo.svg',
          height: 40.0,
          width: 40.0,
          color: Colors.black,),
    title: Text('Some Title'))

Answer 3

SVG to Icon font family

You can use icon_font_generator to convert from SVG icon to icon font family.

• Firstly, make sure to copy SVG icon to your project and follow the structure which can be found package doc.
• To generate icon code, run these commands (it required node 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

This will generate following files:

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

Final pubspec.yaml file:

dev_dependencies:
  icon_font_generator: ^1.0.0

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

Usage:

var icon = const Icon(Iconly.outline2User);

NOTE: there might be wrong rendering for complex SVG file.