SVG Icon Widget

Open Source Love License Dart CI Version

A Flutter package that provides a simple way to use SVG icons in your Flutter app. It wraps the flutter_svg package to provide a more convenient way to use SVG icons.

Show some ❤️ and star the repo to support the project

A showcase of SvgIcon

Features

  • 🎯 Easy to use API similar to Flutter's built-in Icon widget
  • 🎨 Supports colorizing SVG icons
  • 🎭 Respects IconTheme like built-in Icons
  • 📏 Supports custom size

Installation

Add the following to your pubspec.yaml and replace [version] with the latest version:

dependencies:
  svg_icon_widget: ^[version]

Usage

To get started, import the package:

import 'package:svg_icon_widget/svg_icon_widget.dart';

Then, create the SvgIconData object with the SVG icon data:

const reactionLol = SvgIconData('assets/ic_reaction_lol.svg');

Finally, use the SvgIcon widget to display the SVG icon:

IconButton(
  icon: SvgIcon(reactionLol),
  onPressed: () {
    // Handle button press
  },
),

That's it! You can now use SVG icons in your Flutter app.

Preserving Original Colors

By default, SvgIcon will colorize the SVG icon using the current IconTheme color. This is useful for most cases where you want to use the same color as the surrounding icons. However, some SVGs have intentional color schemes that you may want to preserve. For these cases, you can use the preserveColors property:

const reactionLol = SvgIconData(
  'assets/ic_reaction_lol.svg',
   preserveColors: true, // Preserve original colors
);

License

MIT License

Libraries

svg_icon_widget