Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Icon Highlighted

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style iconHighlighted is ICON_HIGHLIGHTED_STYLES.

You can not change the name of the object of tokens.

IconHighlighted component style can be configured through the variant prop.

Variants ans Sizes

Variants can modify the styles for the IconHighlighted for each size.

Available sizes:

1234567
enum IconHighlightedSizeType {
  EXTRA_SMALL = SIZES.EXTRA_SMALL,
  SMALL = SIZES.SMALL,
  MEDIUM = SIZES.MEDIUM,
  LARGE = SIZES.LARGE,
  EXTRA_LARGE = SIZES.EXTRA_LARGE,
}

The available tokens for each size are:

12345678
const ICON_HIGHLIGHTED_STYLES = {
  [VARIANT]: {
    [SIZE]: {
      container?: CommonStyleType;
      icon?: IconTypes;
    }
  }
}

Example

iconHighlighted theme object example:

12345678910
const AVATAR_STYLES = {
  const ICON_HIGHLIGHTED_STYLES = {
  [VARIANT]: {
    [IconHighlightedSizeType.EXTRA_SMALL]: {
      container: {
        width: 'width',
        height: 'height',
      },
      icon: {
        width: 'width',
Icon HighlightedCode API
Icon HighlightedAccessibility