Icon - Olive Developer Documentation

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
React
1
import { whisper } from '@oliveai/ldk';
2
import {
3
  Color,
4
  Direction,
5
  IconSize,
6
  IconVariant,
7
  JustifyContent,
8
  StyleSize,
9
  WhisperComponentType,
10
} from '@oliveai/ldk/dist/whisper/types';
11
​
12
whisper.create({
13
  label: 'Icon Example',
14
  components: [
15
    {
16
      type: whisper.WhisperComponentType.Box,
17
      direction: Direction.Vertical,
18
      justifyContent: JustifyContent.Left,
19
      children: [
20
        {
21
          type: whisper.WhisperComponentType.Markdown,
22
          body: 'Icon utilizes different Material Icons.',
23
        },
24
        {
25
          type: whisper.WhisperComponentType.Box,
26
          direction: Direction.Horizontal,
27
          justifyContent: JustifyContent.Left,
28
          children: [
29
            {
30
              type: whisper.WhisperComponentType.Icon,
31
              name: 'star',
32
            },
33
            {
34
              type: whisper.WhisperComponentType.Icon,
35
              name: 'arrow_forward',
36
            },
37
            {
38
              type: whisper.WhisperComponentType.Icon,
39
              name: 'disc_full',
40
            },
41
            {
42
              type: whisper.WhisperComponentType.Icon,
43
              name: 'edit',
44
            },
45
            {
46
              type: whisper.WhisperComponentType.Icon,
47
              name: 'home',
48
            },
49
          ],
50
        },
51
        {
52
          type: whisper.WhisperComponentType.Divider,
53
          layout: {
54
            marginBottom: StyleSize.Small,
55
            marginTop: StyleSize.Small,
56
          },
57
        },
58
        {
59
          type: whisper.WhisperComponentType.Markdown,
60
          body: 'Icon with a click handler or disabled, and have a tooltip.',
61
        },
62
        {
63
          type: whisper.WhisperComponentType.Box,
64
          direction: Direction.Horizontal,
65
          justifyContent: JustifyContent.Left,
66
          children: [
67
            {
68
              type: whisper.WhisperComponentType.Icon,
69
              name: 'arrow_forward',
70
              onClick: () => console.log('Clicked Active'),
71
            },
72
            {
73
              type: whisper.WhisperComponentType.Icon,
74
              disabled: true,
75
              name: 'arrow_forward',
76
              onClick: () => console.log('Clicked Disabled'),
77
            },
78
          ],
79
        },
80
        {
81
          type: whisper.WhisperComponentType.Divider,
82
          layout: {
83
            marginBottom: StyleSize.Small,
84
            marginTop: StyleSize.Small,
85
          },
86
        },
87
        {
88
          type: whisper.WhisperComponentType.Markdown,
89
          body: 'Icons with different sizes.',
90
        },
91
        {
92
          type: whisper.WhisperComponentType.Box,
93
          direction: Direction.Horizontal,
94
          justifyContent: JustifyContent.Left,
95
          children: [
96
            {
97
              type: whisper.WhisperComponentType.Icon,
98
              name: 'add_circle',
99
              size: IconSize.Small,
100
            },
101
            {
102
              type: whisper.WhisperComponentType.Icon,
103
              name: 'add_circle',
104
              size: IconSize.Medium,
105
            },
106
            {
107
              type: whisper.WhisperComponentType.Icon,
108
              name: 'add_circle',
109
              size: IconSize.Large,
110
            },
111
            {
112
              type: whisper.WhisperComponentType.Icon,
113
              name: 'add_circle',
114
              size: IconSize.XLarge,
115
            },
116
          ],
117
        },
118
        {
119
          type: whisper.WhisperComponentType.Divider,
120
          layout: {
121
            marginBottom: StyleSize.Small,
122
            marginTop: StyleSize.Small,
123
          },
124
        },
125
        {
126
          type: whisper.WhisperComponentType.Markdown,
127
          body: 'Icons with different colors.',
128
        },
129
        {
130
          type: whisper.WhisperComponentType.Box,
131
          direction: Direction.Horizontal,
132
          justifyContent: JustifyContent.Left,
133
          children: [
134
            {
135
              type: whisper.WhisperComponentType.Icon,
136
              name: 'add_location',
137
              color: Color.Black,
138
            },
139
            {
140
              type: whisper.WhisperComponentType.Icon,
141
              name: 'add_location',
142
              color: Color.Accent,
143
            },
144
            {
145
              type: whisper.WhisperComponentType.Icon,
146
              name: 'add_location',
147
              color: Color.Grey,
148
            },
149
            {
150
              type: whisper.WhisperComponentType.Icon,
151
              name: 'add_location',
152
              color: Color.WhisperStrip,
153
            },
154
            {
155
              type: whisper.WhisperComponentType.Icon,
156
              name: 'add_location',
157
              color: Color.White,
158
            },
159
          ],
160
        },
161
        {
162
          type: whisper.WhisperComponentType.Divider,
163
          layout: {
164
            marginBottom: StyleSize.Small,
165
            marginTop: StyleSize.Small,
166
          },
167
        },
168
        {
169
          type: whisper.WhisperComponentType.Markdown,
170
          body: 'Different Icon variants.',
171
        },
172
        {
173
          type: whisper.WhisperComponentType.Box,
174
          direction: Direction.Horizontal,
175
          justifyContent: JustifyContent.Left,
176
          children: [
177
            {
178
              type: whisper.WhisperComponentType.Icon,
179
              name: 'account_balance_wallet',
180
            },
181
            {
182
              type: whisper.WhisperComponentType.Icon,
183
              name: 'account_balance_wallet',
184
              variant: IconVariant.Outlined,
185
            },
186
            {
187
              type: whisper.WhisperComponentType.Icon,
188
              name: 'account_balance_wallet',
189
              variant: IconVariant.Round,
190
            },
191
            {
192
              type: whisper.WhisperComponentType.Icon,
193
              name: 'account_balance_wallet',
194
              variant: IconVariant.Sharp,
195
            },
196
            {
197
              type: whisper.WhisperComponentType.Icon,
198
              name: 'account_balance_wallet',
199
              variant: IconVariant.TwoTone,
200
            },
201
          ],
202
        },
203
        {
204
          type: whisper.WhisperComponentType.Divider,
205
          layout: {
206
            marginBottom: StyleSize.Small,
207
            marginTop: StyleSize.Small,
208
          },
209
        },
210
      ],
211
    },
212
  ],
213
});
Copied!
1
import * as React from 'react';
2
import '@oliveai/ldk';
3
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
4
import {
5
  Color,
6
  Direction,
7
  IconSize,
8
  IconVariant,
9
  JustifyContent,
10
  StyleSize,
11
} from '@oliveai/ldk/dist/whisper';
12
​
13
const IconExample = () => {
14
  return (
15
    <oh-whisper label="Icon Example" onClose={() => {}}>
16
      <>
17
        <oh-box
18
          direction={Direction.Vertical}
19
          justifyContent={JustifyContent.Left}
20
        >
21
          <oh-markdown body={'Icon utilizes different Material Icons.'} />
22
          <oh-box
23
            direction={Direction.Horizontal}
24
            justifyContent={JustifyContent.Left}
25
          >
26
            <oh-icon name="star" />
27
            <oh-icon name="arrow_forward" />
28
            <oh-icon name="disc_full" />
29
            <oh-icon name="edit" />
30
            <oh-icon name="home" />
31
          </oh-box>
32
          <oh-divider
33
            layout={{
34
              marginBottom: StyleSize.Small,
35
              marginTop: StyleSize.Small,
36
            }}
37
          />
38
          <oh-markdown
39
            body={'Icon with a click handler or disabled, and have a tooltip.'}
40
          />
41
          <oh-box
42
            direction={Direction.Horizontal}
43
            justifyContent={JustifyContent.Left}
44
          >
45
            <oh-icon
46
              name="arrow_forward"
47
              onClick={() => {
48
                console.log('Clicked Active');
49
              }}
50
              tooltip="Tooltip"
51
            />
52
            <oh-icon
53
              disabled={true}
54
              name="arrow_forward"
55
              onClick={() => {
56
                console.log('Clicked Disabled');
57
              }}
58
              tooltip="Other tooltip"
59
            />
60
          </oh-box>
61
          <oh-divider
62
            layout={{
63
              marginBottom: StyleSize.Small,
64
              marginTop: StyleSize.Small,
65
            }}
66
          />
67
          <oh-markdown body={'Icons with different sizes.'} />
68
          <oh-box
69
            direction={Direction.Horizontal}
70
            justifyContent={JustifyContent.Left}
71
          >
72
            <oh-icon name="add_circle" size={IconSize.Small} />
73
            <oh-icon name="add_circle" size={IconSize.Medium} />
74
            <oh-icon name="add_circle" size={IconSize.Large} />
75
            <oh-icon name="add_circle" size={IconSize.XLarge} />
76
          </oh-box>
77
          <oh-divider
78
            layout={{
79
              marginBottom: StyleSize.Small,
80
              marginTop: StyleSize.Small,
81
            }}
82
          />
83
          <oh-markdown body={'Icons with different colors.'} />
84
          <oh-box
85
            direction={Direction.Horizontal}
86
            justifyContent={JustifyContent.Left}
87
          >
88
            <oh-icon name="add_location" color={Color.Black} />
89
            <oh-icon name="add_location" color={Color.Accent} />
90
            <oh-icon name="add_location" color={Color.Grey} />
91
            <oh-icon name="add_location" color={Color.WhisperStrip} />
92
            <oh-icon name="add_location" color={Color.White} />
93
          </oh-box>
94
          <oh-divider
95
            layout={{
96
              marginBottom: StyleSize.Small,
97
              marginTop: StyleSize.Small,
98
            }}
99
          />
100
          <oh-markdown body={'Different Icon variants.'} />
101
          <oh-box
102
            direction={Direction.Horizontal}
103
            justifyContent={JustifyContent.Left}
104
          >
105
            <oh-icon name="account_balance_wallet" size={IconSize.XLarge} />
106
            <oh-icon
107
              name="account_balance_wallet"
108
              size={IconSize.XLarge}
109
              variant={IconVariant.Outlined}
110
            />
111
            <oh-icon
112
              name="account_balance_wallet"
113
              size={IconSize.XLarge}
114
              variant={IconVariant.Round}
115
            />
116
            <oh-icon
117
              name="account_balance_wallet"
118
              size={IconSize.XLarge}
119
              variant={IconVariant.Sharp}
120
            />
121
            <oh-icon
122
              name="account_balance_wallet"
123
              size={IconSize.XLarge}
124
              variant={IconVariant.TwoTone}
125
            />
126
          </oh-box>
127
          <oh-divider
128
            layout={{
129
              marginBottom: StyleSize.Small,
130
              marginTop: StyleSize.Small,
131
            }}
132
          />
133
        </oh-box>
134
      </>
135
    </oh-whisper>
136
  );
137
};
138
​
139
ReactWhisper.renderNewWhisper(<IconExample />);
Copied!
Whisper Components - Previous
Next - Whisper Components
List Pair
Last modified 23d ago
Copy link
Contents
Props:
Examples