ChatiumFor developersPlaygroundPricing
Sign in

SmartIcon

Key Features

The icon can be displayed as an image (URL), text, or SVG icon.
Support for various icon sizes through standard presets (sm, md, lg, xl, 2xl) or custom values.
Ability to add badges and sub-icons for extended functionality.
Support for event handlers (onClick, onContext) for interaction with the icon.

Properties

  • style (object): A style object that allows customization of the icon's background (backgroundColor).
  • name (string): The name of the icon. Depending on the logic, it may be used to display SVG or another type of content.
  • url (string): URL for displaying an image as an icon.
  • text (string): Text that is displayed instead of an image or SVG if they are not provided.
  • size (IconSize): The size of the icon. It can be a preset (sm, md, lg, xl, 2xl) or a numeric value to specify a specific size.
  • badges (SmartIconBadge | SmartIconBadge[] | SubIcon | SubIcon[]): A list of badges or sub-icons that can be added to the main icon.
  • onClick (function | AppUiAction | AppUiAction[]): Click handler for the icon.
  • onContext (function | AppUiAction | AppUiAction[]): Handler for context menu events (e.g., when right-clicking).

Helper Functions

  • fillIconSizeProps:
    Fills the style object with icon sizes based on the provided size.
  • fillIconTextProps:
    Determines the text size within the icon based on the length of the text and the size of the icon.
  • getIconSizePx:
    Converts preset sizes (sm, md, lg, xl, 2xl) or numeric values into pixels.
  • parseNumberString:
    Converts a string or numeric value into a number.
  • normalizeIconSize:
    Converts string sizes (e.g., sm, lg) or numeric values into pixels.