Description:

tabler icons next

Tabler Icons Next for Flutter #

Yet another Tabler Icons package for Flutter that keeps updating with the latest version of the upstream.
🎨 Icons gallery #
https://tabler-icons-next.betakuang.me/
✴️ Migrate to v3 #
v3.x comes with some breaking changes. Font icons and SVGs are no longer available, and each icon is now a individual widget.
For example, to draw a check mark icon in v2, you may use
// v2

Icon(TablerIcons.check)
// or
SvgPicture.string(TablerIconsSvg.check)
copied to clipboard
Now in v3 you should use
// v3

Check()
copied to clipboard
To avoid confusion, you may want to add an alias to this package like
// v3

import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

tabler.Check()
copied to clipboard
🎉 Getting started #
Directly import #
import 'package:tabler_icons_next/tabler_icons_next.dart';

Check()
copied to clipboard

Note:
A dollar sign ($) prefix is added to icon names not allowed by Dart. Currently only Function is altered to $Function.

Add an alias #
Names of some icons may conflict with other Flutter/Dart classes (for example Container and BorderRadius). Use a package alias to avoid confusion.
import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

tabler.Check()
copied to clipboard
Set a stroke width, color, etc. #
import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

tabler.Check(
height: 18,
width: 18,
strokeWidth: 1.5,
color: Colors.teal,
)
copied to clipboard
Tabler Icons Next uses flutter_svg to draw icons. Parameters from SvgPicture.string are ported to icon widgets for customization. See docs of SvgPicture.string for the full list of params.
Wrap inside an IconTheme #
Similar to the built-in Icon and IconTheme, Tabler Icons Next provides a way to customize the theme of icons from outside the widgets.
import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

tabler.IconTheme(
data: tabler.IconThemeData(
strokeWidth: 1.5,
color: Colors.teal,
),
child: tabler.Check(),
)
copied to clipboard
This allows you to wrap the icons into your own widgets and customize the styles to your needs. For example:
import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

class MyIconButton extends StatelessWidget {
const MyIconButton(
this.icon, {
super.key,
});

// Use tabler.Icon if you need a base class for all icons.
final tabler.Icon icon;

@override
Widget build(BuildContext context) {
return GestureDetector(
// ...
child: tabler.IconTheme(
// Customize the styles of the icon, no matter what icon is passed in.
data: tabler.IconThemeData(
color: Colors.amber,
),
child: icon,
),
);
}
}
copied to clipboard
License #
MIT

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter