An Icon element displays a single image-based symbol, typically used for actions, indicators, or decoration. It supports customizable size, corner radius, spacing, and interactive events like click and long-click.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Name | String | {name} | Name identifier for the icon element. |
| Src | URL | {logoSrc} | Source path or URL of the icon graphic. |
| Alt | String | {alt} | Alternative text shown if the icon fails to load. |
| Size | Number | 0 | Size of the icon (width/height). |
| Radius | Number | 12 | Border radius applied to the icon. |
| Margin | Number | 20 | Outer spacing around the icon. |
| MarginLine | Number | 10 | Vertical spacing between this icon and nearby elements. |
| OnClick | Array |
[] | List of actions triggered on tap. |
| OnLongClick | Array |
[] | List of actions triggered on long press. |
Coding:
{
"@Type": "Icon",
"Name": "{name}",
"Src": "{logoSrc}",
"Alt": "{alt}",
"Size": 0,
"Radius": 12,
"Margin": 20,
"MarginLine": 10,
"OnClick": [],
"OnLongClick": []
}To see how to create this element in Applin Studio (no-code mode), visit:
Design the Icon in Applin Studio