Icon (Alpha)
The icon component can be integrated into custom components to enhance their visual appeal and functionality, such as adding an icon within a Button (Alpha) , displaying it in a Card (Alpha) , or embedding it in a View (Alpha) . By customizing an icon, you can adjust its size, color, and shape, and even apply animations or conditional styling, ensuring seamless alignment with your application's design system and user experience.
For steps on creating a custom component, see How to create a custom component.
You can use when and instanceId with component.icon, add the properties before the options: property. The available list of options is shown below. For the full list of properties, see jc-icon .
Options | value |
|---|---|
color | Multiple, use IntelliSense to view the available list. |
emphasis | Changing the color, for example, brighter, bolder, or a contrasting hue. extra-low high low low-medium medium |
onPress | Multiple, use IntelliSense to view the list of available actions to call. The action is called when the icon is pressed. |
shape | Determine the shape around the icon. circle rounded (default) square |
size | Enter a number value or use an expression to determine the size of the icon. |
type | Configure the icon's display as a standalone icon, within a shape, or in a duotone style. The following options are available: basic (default) duotone contained |
This example shows the component.icon with different icon sizes using the size: property in a Card (Alpha). Examples:
These examples demonstrate the various options for using icons with rounded, square and circled shapes in a Card (Alpha). By combining the shape, type, and size properties, you can achieve the desired appearance. Examples:
Create an icon bar within in a component.card by configuring multiple component.icon. Add an onPress event to each icon that opens its associated URL. You can configure the onPress event to call various available actions.
Example:
