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

Parameter	Type	Description
icon	IconData	Required. The icon data object to render (e.g MaterialIcons.icon_home).
size	Unit?	The width and height of the icon. Defaults to 24px.
fill	Color?	The fill color of the icon. Defaults to inheriting the parent's text color (currentColor).
stroke	Color?	The stroke color of the icon.
viewBox	(double, double, double, double)?	defines the position and dimensions of the SVG viewport, allowing you to control how the SVG content is scaled and displayed. It consists of four values: min-x, min-y, width, and height, which determine the visible area and scaling of the SVG graphic
strokeWidth	String?	efines different types of endings for a line or an open path
strokeLineJoin	enum StrokeLineJoin?	defines the shape of the corners where two lines meet
strokeLineCap	enum StrokeLineCap?	The width of the stroke.
classes	String?	A space-separated list of CSS classes to apply to the SVG element.
key	Key?	A key to uniquely identify the component.
id	String?	The HTML id attribute for the SVG element.
styles	Styles?	Inline CSS styles to apply to the SVG element.
attributes	Map<String, String>?	A map of additional HTML attributes to apply to the SVG element.
events	Map<String, EventCallback>?	A map of event listeners to attach to the SVG element.

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