How to use svg as Icon?-CodePudding

I need to add new svg file and use it as Icon but I don't know how to do this. In my project I have something like this:

import 'package:flutter/widgets.dart';

class PartyFinderIcon {
  PartyFinderIcon._();

  static const _kFontFam = 'PartyIcons';
  static const String? _kFontPkg = null;

  static const IconData person =
      IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData user_outline =
      IconData(0xe801, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  .
  .
  .
  .
  static const IconData kalendarz_maly =
      IconData(0xe815, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData event_nowy =
      IconData(0xe815, fontFamily: _kFontFam, fontPackage: _kFontPkg);

but I don't know how it's working.

Then it's code it's used like this:

IconButton(
                  icon: GradientIcon(
                    customicon.PartyFinderIcon.event_nowy,
                    size.width * 0.0675,
                    LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.topRight,
                      colors: colorGiver(0),
                    ),
                  ),

Or maybe I can add this svg as Icon in other way?

I tried with SvgPicture.asset but I got error that it's not type of IconData

IconButton(
                  icon: GradientIcon(
                    SvgPicture.asset('asset/path'),
                    size.width * 0.0675,
                    LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.topRight,
                      colors: colorGiver(0),
                    ),
                  ),

class GradientIcon extends StatelessWidget {
  const GradientIcon(
    this.icon,
    this.size,
    this.gradient,
  );

  final IconData icon;
  final double? size;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      child: SizedBox(
        width: size! * 2,
        height: size! * 1.2,
        child: Icon(
          icon,
          size: size,
          color: Colors.white,
        ),
      ),
      shaderCallback: (Rect bounds) {
        return gradient.createShader(bounds);
      },
    );
  }
}

CodePudding user response：

Refer to the class GradientIcon, you have placed the Icon widget (child of SizedBox), which expects an icon of type IconData and here in your code, it receives the kind of SvgPicture.

Remove the Icon widget and the size & color property, and specify the color property in SvgPicture widget.

Your GradientIcon class should return something like below:

return ShaderMask(
  child: SizedBox(
    width: size! * 2,
    height: size! * 1.2,
    child: icon,
  ),
  shaderCallback: (Rect bounds) {
    return gradient.createShader(bounds);
  },
);

and specify color in SvgPicture like this

GradientIcon(
  SvgPicture.asset(
    'asset/path',
    color: Colors.blue,
  ),
  ..
)