Icon Bundler #

Bundle a collection of svg, png, jpg files as a single image containing all the icons.

Install #

brew install resvg # required for SVG rendering
flutter pub global activate icon_bundler

Usage #

Command Line arguments #

-s, --sizes                  Comma-separated list of sizes, e.g. 24,48
-n, --name                   Name of the spritesheet and generated classes.
                             (defaults to "app_icon")
-p, --package                Name of the package to add it to generated image providers.
-r, --pixel-ratios           Comma-separated list of pixel ratios to generate spritesheets for.
                             (defaults to "1.0,2.0,3.0")
-i, --input                  Directory containing SVG files to bundle.
                             (defaults to ".")
-o, --output                 Directory to output the generated spritesheets and code.
                             (defaults to ".")
-a, --asset-relative-path    Relative path for assets in the output directory.
                             (defaults to "assets/")
-c, --code-relative-path     Relative path for generated code in the output directory.
                             (defaults to "lib/src/widgets/")
-h, --[no-]help              Show help.

Generated Code #

Once generated, you can simply use the resulting widget with its associated data.

Example #

Input files

Output asset

Output code

@override
Widget build(BuildContext context) {
  return AppIcon(
    AppIcons.magicFill, // Use the generated data
    color: Colors.blue, // Optional color to apply to the icon
    size: 64,
  );
}

Q&A #

How are pixel ratios handled?

Pixel ratios are handled by generating multiple versions of the spritesheet. The widget will then select the image with the closest matching sprite size. Everything is configurable through the command line arguments, allowing you to specify which pixel ratios to generate.

How color is applied to the icons?

Color can be applied to the icons by passing a color parameter to the generated widget. The widget will then apply this color to the icons, allowing for easy customization of their appearance. The blend mode used for tinting is BlendMode.srcIn, which means the color will be applied as a mask to the original icon.

What is the advantage of using this package compared to using flutter_svg?

The advantage of using this package is that it allows you to bundle multiple SVG, PNG, or JPG files into a single spritesheet. This reduces the number of asset files in your project, which can improve performance and organization. Additionally, it generates a widget that can be used to easily access and display the bundled icons without needing to manage individual files.

What is the advantage of using this package compared to a font icon package?

The advantage of using this package is that it allows you to use SVG, PNG, or JPG files directly as icons, which can provide better quality and flexibility compared to font icons. You can easily customize the appearance of each icon without needing to create a new font file. Additionally, this package supports colored icons as well as tinted ones.