x_icon

Description:

x icon

flutter XIcon #

What if you decided to load icon from server? But want to use local's font icons?
"general remote icon loader for flutter." (this is part of bridged's remote-ui project)


why not to use other lib such as flutter_icons?

they do not support custom icons
you cannot remotely load icons.
not compatitable with bridged's dynamic


Flutter remote icon enables you to load material icons (Icons.~) or your custom icon (CustomIcons.~) or remotely fetched content (svg) to your icon widget via uri, wich can be dynamically configured, remotely loaded.

Installation #
dependencies:
x_icon: latest

dev_dependencies:
x_icon_generator: latest
build_runner: latest
copied to clipboard

for more information about x_icon_generator, please refer here

Usage #
supported usage

loading native icons (IconData)
loading remote icon (svg, png) into Icon()
loading packaged (local) asset as Icon
loading packaged (local) font as Icon

example
Widget buildRemoteIcon(){
// var remoteIconData = new XIconData(Icons.add); // -> flutter native material icons
// var remoteIconData = new XIconData("material://Icons.add"); // -> native material icons remotely (dynamically)
// var remoteIconData = new XIconData("https://example.com/svg.svg"); // -> loading remote svg
// var remoteIconData = new XIconData("assets/icons/add.png"); // -> loading local assets
// var remoteIconData = new XIconData("custom-namespace://CustomIcons.icon_name"); // -> (requires pre-usage definition)
return XIcon(icon: XIconData("material://Icons.add"), color: Colors.black);

// or...
return Icon(icon: XIconData("material://Icons.add"), color: Colors.black);
}
copied to clipboard
remote url icon
XIcon(XIconData.fromUri(
"https://raw.githubusercontent.com/bridgedxyz/dynamic/master/flutter/packages/x_icon/doc/remote-icon-example/twotone_brightness_auto_black_18dp.png"));
copied to clipboard
Full example available here
supported icons

Icons.add (non dynamic usage)
"local://assets/image.png"
"http://example.com/image.png"
"https://example.com/image.png"
"material://icons.name"
"custom-namespace://CustomIcons.icon_name"

register custom font icon schema #
void main() {
XIcons.register("namespace", {
"namespace://CustomIcons.icon_name": CustomIcons.icon_name
});
runApp(ExampleApp());
}
copied to clipboard
generate icons mapping for your own custom font IconData #
in your custom_icons.dart
// your font based IconData class
part 'custom_icons.g.dart';

@IconMapper("namespace")
class CustomIcons{
// ...
static const IconData add_awesome; // ~
static const IconData person_awesome; // ~
// ...

Map<String, IconData> get mapping{
return _CustomIconsMapping;
}

static IconData fromUri(String uri) => _$CustomIconsFromUri(uri);
}
copied to clipboard
and run flutter pub build_runner build
will generate custom_icons.g.dart
part of 'custom_icons.dart';

const _CustomIconsMapping = {
"namespace://CustomIcons.add_awesome": CustomIcons.add_awesome,
"namespace://CustomIcons.person_awesome": CustomIcons.person_awesome,
};

IconData _$CustomIconsFromUri(String uri){
return _CustomIconsMapping;[uri];
}
copied to clipboard
next, you can register the namespace and mappings easily
void main() {
// register mapping
XIcons.register("namespace", CustomIcons.mapping);
runApp(ExampleApp());
}

// and use it!
Widget buildDynamicIcon(){
return XIcon(icon: RemoteIconData("namespace://CustomIcons.person_awesome"));
}
copied to clipboard

for using font as a icon please read this blog

What problem does it solve? #

https://github.com/flutter/flutter/issues/16189