MiIcon

The MiIcon component is a Flutter widget for displaying icons, supporting both Material Icons and custom SVG icons. Configuration is driven by JSON for declarative icon definitions.

Overview

MiIcon offers a flexible way to integrate icons into your Flutter UI. It can render icons from Flutter's built-in Material Icons library or display custom SVG icons defined within your application's theme. The icon and its styling (size and color) are configurable via JSON.

Component Name: icon

JSON key: "component": "icon".

Parameters

The MiIcon component is customizable with these JSON parameters, in addition to the base styling parameters inherited from MiStatelessWidget:

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
icon	String	IconData, String (SVG)	Icon Definition: Specifies the icon to display. Can be a string representing a Material Icon name (e.g., 'add', 'delete') or an SVG string. For Material Icons, the framework uses IconDataHelper.get to resolve the string to an IconData. For SVG icons, provide the raw SVG string.	null	No	No
size	num	double	Icon Size: Sets the size of the icon in logical pixels.	null	Yes	No
color	String	Color	Icon Color: Sets the color of the icon. Accepts Flutter color names or hex codes. Inherited from MiStatelessWidget.	null	Yes	No
padding	List<num>	EdgeInsets	Inner Padding: Sets padding within the icon container. Inherited from MiStatelessWidget.	null	Yes	No
margin	List<num>	EdgeInsets	Outer Margin: Defines the margin surrounding the icon widget. Inherited from MiStatelessWidget.	null	Yes	No
alignment	String	AlignmentGeometry	Alignment: Specifies how the icon should be aligned within its parent. Inherited from MiStatelessWidget.	"topLeft"	Yes	No
width	num	double	Fixed Width: Defines a fixed width for the icon component. Inherited from MiStatelessWidget.	null	Yes	No
height	num	double	Fixed Height: Defines a fixed height for the icon component. Inherited from MiStatelessWidget.	null	Yes	No

Note:

• Icon Types: MiIcon supports Material Icons (names like 'add', 'check') and custom SVG icons (raw SVG strings or names referencing theme SVGs).
• SVG Icon Theming: SVG icons can be themed using the color parameter.
• MiStatelessWidget Inheritance: MiIcon inherits styling and layout parameters from MiStatelessWidget.

Example JSON Configurations

Example 1: Displaying a Material Icon

{
  "component": "icon",
  "icon": "check",
  "size": 24,
  "color": "green"
}

Explanation of Example 1:

• component: "icon": This is a MiIcon component.
• icon: "check": Specifies the Material Icon named "check".
• size: 24: Sets the icon size to 24 logical pixels.
• color: "green": Sets the icon color to green.

Example 2: Displaying a Custom SVG Icon

{
  "component": "icon",
  "icon": "<svg>...SVG Path Data...</svg>",
  "size": 32,
  "color": "primary"
}

Explanation of Example 2:

• component: "icon": Identifies this as a MiIcon component.
• icon: "<svg>...SVG Path Data...</svg>": Provides a placeholder for a raw SVG string. Replace ...SVG Path Data... with your actual SVG code. Ensure your SVG is properly formatted.
• size: 32: Sets the icon size to 32 logical pixels.
• color: "primary": Sets the icon color to the primary color from your application's theme.

Example 3: Displaying a Themed Custom SVG Icon (defined in theme)

Assuming your theme's themeData['icons']['customIcons'] contains:

{
  "myCustomIcon": "<svg>...Custom SVG Path Data from Theme...</svg>"
}

Then the JSON for MiIcon would be:

{
  "component": "icon",
  "icon": "myCustomIcon",
  "size": 48,
  "color": "accent"
}

Explanation of Example 3:

• component: "icon": This is a MiIcon component.
• icon: "myCustomIcon": Specifies the name of a custom SVG icon. getIconString('myCustomIcon') will retrieve the SVG string associated with "myCustomIcon" from your theme data.
• size: 48: Sets the icon size to 48 logical pixels.
• color: "accent": Sets the icon color to the accent color from your application's theme.