Icon

Overview

The Icon component is tailored for rendering vector icons, utilizing Material Icons on Android and SF Symbols on iOS. This versatility ensures that the icons naturally integrate with the platform-specific design language, enhancing the UI's aesthetic and user experience.

info

The Icon Component is currently available only for iOS.

Sample JSON

Below is a sample JSON object demonstrating how to define an Icon component with various data and style properties:

icon.json

{
  "type": "icon",
  "data": {
    "icon": "person.fill"
  },
  "style": {
    "height": 200,
    "width": 200,
    "scale": "fit",
    "color": "0000ff",
    "colorDark": "FFC0CB",
    "cornerRadius": 24,
    "padding": {
      "top": 5,
      "right": 0,
      "bottom": 5,
      "left": 0
    }
  }
}

This configuration directs the Icon component to display an icon named person.fill with specified style properties:

• Height and Width: Set to 200 logical pixels, defining the icon's size.
• Scale: The fit value ensures that the icon scales proportionally to fit within the specified dimensions.
• Color: Specifies the icon color as blue (0000ff) under normal circumstances and pink (FFC0CB) in dark mode.
• CornerRadius: Applies a 24 pixel radius to the icon corners, potentially affecting the container or background shape.
• Padding: Adds a 5 pixel padding on the top and bottom, with no padding on the sides.

Data Properties

The data properties specify the content and appearance of the Icon component. The key data property is:

Property	Type	Required	Description
icon	String	true	The name of the icon to display.

icon

• Type: String (required)
• Description: Identifies the icon to be rendered. The value should correspond to a valid name in the Material Icons set for Android or SF Symbols for iOS.

Style Properties (Optional)

Style properties allow further customization of the Icon component's appearance:

info

The style properties are optional. If not specified, the Icon component will use default values or platform standards.

The available style properties for the Icon component include:

Property	Type	Required	Description
height	Float	false	The height of the icon in logical pixels.
width	Float	false	The width of the icon in logical pixels.
color	String	false	The color of the icon.
colorDark	String	false	The color of the icon in dark mode.
scale	String	false	Defines how the icon's content fits its space, similar to image scaling.
cornerRadius	Float	false	Applies rounded corners to the icon's container.
padding	JSON	false	The padding around the icon, specified for each side.

The style properties for the Icon component allow for customization of its appearance, enabling the icon to be seamlessly integrated into various UI designs while adhering to platform-specific aesthetics. Here's a detailed explanation of each style property:

height

• Type: Float (optional)
• Description: Specifies the vertical size of the icon in logical pixels. This property determines the height of the icon, allowing for precise control over its dimensions within the UI. If not specified, the icon might use a default or intrinsic size based on its container or the icon set standards.

width

• Type: Float (optional)
• Description: Defines the horizontal size of the icon in logical pixels. Similar to height, this property allows for detailed control over the width of the icon, ensuring that it fits as intended within the layout. Lacking a specific width, the icon may default to its natural or container-defined width.

color

• Type: String (optional)
• Description: Sets the color of the icon using a CSS-compatible color value (e.g., hex codes, color names, or rgba values). This property customizes the icon's fill color, enabling it to match the application's color scheme or to convey different meanings (e.g., red for an error icon).

colorDark

• Type: String (optional)
• Description: Determines the icon color when the system is in dark mode, using the same range of CSS-compatible color values. This allows the icon to maintain visibility and contrast against darker backgrounds, enhancing user experience in varying lighting conditions or user preferences.

scale

• Type: String (optional)
• Description: Defines how the icon's content fits within the given height and width, similar to the object-fit property for images in CSS. Common values might include "fit" to preserve the aspect ratio while fitting within the bounds, or "fill" to cover the specified area, potentially cropping the icon.

cornerRadius

• Type: Float (optional)
• Description: Applies a rounded corner radius to the icon's container, specified in logical pixels. This property can soften the icon's appearance or make it visually cohesive with other UI elements that use rounded corners, enhancing the overall design consistency.

padding

• Type: JSON (optional)
• Description: Defines the space around the component. The padding is specified for top, bottom, left, and right individually. Each subproperty is an integer representing the number of logical pixels for the padding.
  • top: The space above the component.
  • bottom: The space below the component.
  • left: The space to the left of the component.
  • right: The space to the right of the component.