IconCraft
IconCraft is a Flutter plugin designed to extend the functionality of the standard Icon
widget. It allows developers to create richer iconography with the ability to combine two icons into a single widget with alignment and scaling options.
Features
- Borders: Add customizable borders around your icons with configurable colors, widths, and styles.
- Secondary Icon: Add an auxiliary icon on top of the base icon, with control over its alignment and relative size, perfect for building creative icon designs.
- Flexible Alignment: Precisely position a secondary icon relative to the primary icon, suitable for various UI design needs.
Installation
To start using IconCraft, add it to your Flutter project by including it in your pubspec.yaml
file:
dependencies:
icon_craft: ^0.1.0
Run flutter pub get
to install the new dependency.
Usage
Here's how you can use the IconCraft widget in your Flutter application:
Basic Usage
IconCraft(
Icon(Icons.email),
Icon(Icons.notifications),
alignment: Alignment.topRight,
decoration: IconDecoration(
border: IconBorder(color: Colors.white),
),
)
The border width of the secondary icon automatically adjusts to the basic icon size. However, you can override this by using the width parameter.
decoration: IconDecoration(
border: IconBorder(
color: Colors.white,
width: 10,
),
)
Colored & Aligned Icons
IconCraft(
Icon(
CupertinoIcons.car_detailed,
color: Colors.grey.shade500,
),
Icon(
CupertinoIcons.checkmark_square_fill,
color: Colors.green.shade200,
),
alignment: Alignment.bottomLeft,
decoration: IconDecoration(
border: IconBorder(
color: Colors.green.shade900,
width: 8.0,
),
),
)
You can color all the three elements: base icon, secondary icon and the color of the stroke/border effect, and its width
Screenshots
Here are a few examples demonstrating what you can accomplish with IconCraft:
Icon packages compatibility:
Credits
This package is inspired by Roux Guillame's work. His original code can be found in this repository
License
Distributed under the BSD 3-Clause License. See LICENSE for more information.