jaspr_icons #

An easy and efficient way to use icons in your Jaspr applications. This package provides a simple Icon() component and a comprehensive, tree-shakable library of 4 icon families.

Overview #

insert icons just like you do in flutter.

Features #

• Simple API: A single, easy-to-use icon() component.
• Tree-Shakable: Only the icons you import are included in your final compiled app.
• Fully Customizable: Easily control the size, color (fill), stroke, and apply custom CSS classes.
• Type-Safe: All icons are static const fields, providing compile-time safety and IDE auto-completion.
• Comprehensive Icon Set: Includes 4 diffrent icon families.

Installation #

Add jaspr_icons to your pubspec.yaml dependencies:

dependencies:
  jaspr_icons: ^2.0.0

Then, run dart pub get.

Usage #

Import the package and use the Icon() component with the desired icon.

import 'package:jaspr/jaspr.dart';

// Import the main library file
import 'package:jaspr_icons/jaspr_icons.dart';

class MyAwesomeComponent extends StatelessComponent {
  @override
  Component build(BuildContext context) => div([
    // 1. Basic Usage: Display the 'home' icon with default settings.
    Icon(MaterialIcons.icon_home),

    // 2. Custom Size and Color: Display a large, red 'favorite' icon.
    Icon(
      MaterialIcons.icon_favorite,
      size: 50.px,
      fill: Colors.red,
    ),


    // 4. Using Stroke Properties: For icons that support it.
    Icon(
      MaterialIcons.icon_circle,
      fill: Colors.transparent,
      stroke: Colors.black,
      strokeWidth: '2px',
    ),
  ]);
}

Available Icons #

open an issue on gitlab if there is a certain icon family that you think should be included

currently availble icon famiilies are :

Google Material Icons #

This package includes 5 styles of the Google Material Icons. available through the MaterialIcons class. The naming convention is <style>_<icon_name>.

baseline --> Icons.icon_handshake
outline  --> Icons.outline_handshake
round    --> Icons.round_handshake
sharp    --> Icons.sharp_handshake
twotone  --> Icons.twotone_handshake

Lucide Icons #

Lucide icons are available through the LucidIcons class. The naming convention is <icon_name>. lucid icons only will prioritize the stroke color over the fill color it's best to set only one.

Fluent Icons #

Fluent icons are available through the FluentIcons class. The naming convention is <icon_name>_<style>.

Tabler Icons #

Tabler icons are available through the TablerIcons class. The naming convention is <icon_name>_<style>.

API Reference #

icon() Component #

Using Your Own Custom Icons #

The icon() component is designed to work with any IconData object. You can create your own library of icons by defining them with the same structure.

// my_custom_icons.dart
import 'package:jaspr_icons/jaspr_icons.dart';

class MyIcons {
  const MyIcons._();

  static const IconData heart = IconData( [
    {
      'tag': 'path',
      'attrs': {
        'd': r'''M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z''',
      }
    }
  ]);
}

// In your component:
 Icon(MyIcons.heart, fill: Colors.pink)

a 'tag: 'root' can be used to specify attributes for the root svg element.

License #

The code for this package is licensed under the MIT License. A copy of the license can be found in the LICENSE file.

The included Google Material Icons are licensed under the Apache License 2.0. Your use of these icons is subject to the terms and conditions of that license. A copy of the Apache License and other required notices can be found in the NOTICE file.

Issues and Contributions #

If you encounter any bugs or have a feature request, please file an issue on the GitLab issue tracker. Contributions are welcome