Icon
Symbols / images using Material icons with customizable colors and sizes.
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 | | ||
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 of icons with different properties.
Javascript
React
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,
},
},
],
},
],
});
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 />);
Last modified 1yr ago