Icon

Symbols / images using Material icons with customizable colors and sizes.

Props:

Properties	Descriptions	Required	Default
color	The color of the component.		Color.Black
disabled	If true, the component is no longer interactive and is greyed out.		false
name	The name of the Google Fonts Material Icon to be rendered. List of supported icons: HERE
onClick	Callback function that executes when the component is clicked.
size	Size of the icon to be rendered.		IconSize.Medium
tooltip	Text that appears when hovering over the component.
variant	The default look is for icons to be filled. This can be overridden with: IconVariant.Outlined IconVariant.Round IconVariant.Sharp IconVariant.TwoTone

Examples

Examples of icons with different properties.

Javascript

import { whisper } from '@oliveai/ldk';
import {
  Color,
  Direction,
  IconSize,
  IconVariant,
  JustifyContent,
  StyleSize,
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';

whisper.create({
  label: 'Icon Example',
  components: [
    {
      type: whisper.WhisperComponentType.Box,
      direction: Direction.Vertical,
      justifyContent: JustifyContent.Left,
      children: [
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Icon utilizes different Material Icons.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'star',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'arrow_forward',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'disc_full',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'edit',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'home',
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Icon with a click handler or disabled, and have a tooltip.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'arrow_forward',
              onClick: () => console.log('Clicked Active'),
            },
            {
              type: whisper.WhisperComponentType.Icon,
              disabled: true,
              name: 'arrow_forward',
              onClick: () => console.log('Clicked Disabled'),
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Icons with different sizes.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_circle',
              size: IconSize.Small,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_circle',
              size: IconSize.Medium,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_circle',
              size: IconSize.Large,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_circle',
              size: IconSize.XLarge,
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Icons with different colors.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.Black,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.Accent,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.Grey,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.WhisperStrip,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.White,
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Different Icon variants.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
              variant: IconVariant.Outlined,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
              variant: IconVariant.Round,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
              variant: IconVariant.Sharp,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
              variant: IconVariant.TwoTone,
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
      ],
    },
  ],
});

React

import * as React from 'react';
import '@oliveai/ldk';
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
import {
  Color,
  Direction,
  IconSize,
  IconVariant,
  JustifyContent,
  StyleSize,
} from '@oliveai/ldk/dist/whisper';

const IconExample = () => {
  return (
    <oh-whisper label="Icon Example" onClose={() => {}}>
      <>
        <oh-box
          direction={Direction.Vertical}
          justifyContent={JustifyContent.Left}
        >
          <oh-markdown body={'Icon utilizes different Material Icons.'} />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon name="star" />
            <oh-icon name="arrow_forward" />
            <oh-icon name="disc_full" />
            <oh-icon name="edit" />
            <oh-icon name="home" />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
          <oh-markdown
            body={'Icon with a click handler or disabled, and have a tooltip.'}
          />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon
              name="arrow_forward"
              onClick={() => {
                console.log('Clicked Active');
              }}
              tooltip="Tooltip"
            />
            <oh-icon
              disabled={true}
              name="arrow_forward"
              onClick={() => {
                console.log('Clicked Disabled');
              }}
              tooltip="Other tooltip"
            />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
          <oh-markdown body={'Icons with different sizes.'} />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon name="add_circle" size={IconSize.Small} />
            <oh-icon name="add_circle" size={IconSize.Medium} />
            <oh-icon name="add_circle" size={IconSize.Large} />
            <oh-icon name="add_circle" size={IconSize.XLarge} />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
          <oh-markdown body={'Icons with different colors.'} />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon name="add_location" color={Color.Black} />
            <oh-icon name="add_location" color={Color.Accent} />
            <oh-icon name="add_location" color={Color.Grey} />
            <oh-icon name="add_location" color={Color.WhisperStrip} />
            <oh-icon name="add_location" color={Color.White} />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
          <oh-markdown body={'Different Icon variants.'} />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon name="account_balance_wallet" size={IconSize.XLarge} />
            <oh-icon
              name="account_balance_wallet"
              size={IconSize.XLarge}
              variant={IconVariant.Outlined}
            />
            <oh-icon
              name="account_balance_wallet"
              size={IconSize.XLarge}
              variant={IconVariant.Round}
            />
            <oh-icon
              name="account_balance_wallet"
              size={IconSize.XLarge}
              variant={IconVariant.Sharp}
            />
            <oh-icon
              name="account_balance_wallet"
              size={IconSize.XLarge}
              variant={IconVariant.TwoTone}
            />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
        </oh-box>
      </>
    </oh-whisper>
  );
};

ReactWhisper.renderNewWhisper(<IconExample />);