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 Google Material Icons.

Overview #

insert icons just like you do in flutter.

The included MaterialIcons library contains the complete set of Google's Material Design Icons, with each icon defined as a static const field. This allows Jaspr's tree-shaking compiler to include only the icons you actually use in your final application bundle, keeping your app fast and lightweight.

Features #

• Simple API: A single, easy-to-use icon() component.
• SSR-Friendly: Designed to work perfectly with Jaspr's server-side rendering and client-side hydration.
• 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 the complete set of Google Material Icons.

Installation #

Add jaspr_icons to your pubspec.yaml dependencies:

dependencies:
  jaspr_icons: ^1.0.0

Then, run dart pub get.

Usage #

Import the package and use the icon() component with the desired icon from the MaterialIcons class.

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: const Unit.pixels(48),
      fill: Colors.red,
    ),

    // 3. Applying Custom CSS Classes: Style an icon with utility CSS.
    icon(
      MaterialIcons.icon_thumb_up,
      classes: 'text-blue-500 hover:text-blue-700',
    ),

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

Available Icons #

This package includes 5 styles of the Google Material Icons. The naming convention is <style>_ followed by the snake_case name of the icon.

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

Your IDE's auto-completion will help you discover all available icons.

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)

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