System StatusSamples on GitHub

Icon (Alpha)

This feature is currently in its Alpha stage of development.

  • As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.

  • In this phase, the feature may contain bugs or behave unpredictably.

  • Jigx recommends using standard, fully supported components until this feature has been fully tested and refined.

  • We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.

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.

Configuration options

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 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

Examples and code snippets

The examples use a set of custom components called sections. The sections are for titles, spacing, and context. The sections code is available on GitHub.

Icon sizes

This example shows the component.icon with different icon sizes using the size: property in a Card (Alpha).

Examples:

  1. See the section component example in GitHub.

  2. See the custom component example in GitHub.

  3. See the jig example in GitHub.

Icon sizes
Icon sizes
# components/icon-sizes.jigx
type: component.default
children:
  - type: component.card
    options:
      children:
        - type: component.text
          options:
            value: Extra large
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon.
            size: extra-large

        - type: component.text
          options:
            value: Large
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon.
            size: large

        - type: component.text
          options:
            value: Medium
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon
            size: medium

        - type: component.text
          options:
            value: Regular
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon.
            size: regular

        - type: component.text
          options:
            value: Small
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon.
            size: small

Icon shapes & types

Icons shapes
Icons shapes

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:

  1. See the custom components example in GitHub for icons-1.0.jigx to icons-3.5.jigx.

  2. See the jig example in GitHub.

  3. See the section component example in GitHub.

# components/icon-1.0.jigx
# See the YAML for icon-1.1.jigx to icon-1.5.jigx in GitHub, link provided
# above.
type: component.default
children:
  - type: component.card
    options:
      direction: row
      children:
        - type: component.icon
          options:
            icon: animation
            size: extra-large
            # Change the shape to circle or square to see the icon appearance 
            # change.
            shape: rounded
            type: basic

        - type: component.icon
          options:
            icon: animation
            size: large
            shape: rounded
            type: basic

        - type: component.icon
          options:
            icon: animation
            size: medium
            shape: rounded
            type: basic

        - type: component.icon
          options:
            icon: animation
            size: regular
            shape: rounded
            type: basic

        - type: component.icon
          options:
            icon: animation
            size: small
            shape: rounded
            type: basic

Icon bar

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:

  1. See the custom component example in GitHub.

  2. See the jig example in GitHub.

Icon bar
Icon bar
# components/icons.jigx
type: component.default
children:
  # Configure a card to contain the icons in a row.
  - type: component.card
    options:
      direction: row
      children:
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon.
            icon: shopping-cart-empty-1
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.amazon.com

        - type: component.icon
          options:
            # Choose an icon.
            icon: mindfullness
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.calm.com

        - type: component.icon
          options:
            # Choose an icon.
            icon: weather
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.accuweather.com

        - type: component.icon
          options:
            # Choose an icon.
            icon: single-neutral
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.linkedin.com

        - type: component.icon
          options:
            # Choose an icon.
            icon: location
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.google.com/maps/
PreviousCard (Alpha)NextText (Alpha)

Last updated

Was this helpful?