Icon
Displays icons from the Vivid Icons Library using predefined colors and sizes.
import { registerIcon } from '@vonage/vivid';
registerIcon('your-prefix');
Use the label attribute to provide the Icon with a descriptive label so that it's meaning can be conveyed to screen reader users.
See the Accessibility section for more information.
The label attribute was added as an alternative to using the aria-label attribute. It is preferable because using aria-label on non-interactive elements (like Icon) idoes not work consistantly across screen readers.
If the component is used without a size, it will use the current font-size value.
If the component is used without a connotation, it will use the current text color.
| Property | Type | Default | Description |
|---|---|---|---|
| connotation | 'alert' | 'accent' | 'cta' | 'success' | 'warning' | 'information' | 'announcement' |
The connotation the icon should have. | |
| label | string |
Provides a (screen reader only) descriptive label for the icon. | |
| name | IconId |
Indicates which icon to resolve. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ | |
| size | 0 | 1 | -1 | 2 | 3 | 4 | 5 | -6 | -5 | -4 | -3 | -2 |
| Property | Type | Default | Description |
|---|---|---|---|
| connotation | 'alert' | 'accent' | 'cta' | 'success' | 'warning' | 'information' | 'announcement' |
The connotation the icon should have. | |
| label | string |
Provides a (screen reader only) descriptive label for the icon. | |
| name | IconId |
Indicates which icon to resolve. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ | |
| size | 0 | 1 | -1 | 2 | 3 | 4 | 5 | -6 | -5 | -4 | -3 | -2 |
| Name | Description |
|---|---|
| default | Default slot. |
| Name | Description |
|---|---|
| default | Default slot. |
| Event | Type | Description |
|---|---|---|
| blur | FocusEvent |
Fires when the element loses focus. |
| click | MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus | FocusEvent |
Fires when the element receives focus. |
| input | Event |
Fires when the value of an element has been changed. |
| keydown | KeyboardEvent |
Fires when a key is pressed. |
| keyup | KeyboardEvent |
Fires when a key is released. |
| Name | Type | Description |
|---|---|---|
| blur | FocusEvent |
Fires when the element loses focus. |
| click | MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus | FocusEvent |
Fires when the element receives focus. |
| input | Event |
Fires when the value of an element has been changed. |
| keydown | KeyboardEvent |
Fires when a key is pressed. |
| keyup | KeyboardEvent |
Fires when a key is released. |