Icon
Displays icons from the Vivid Icons Library using predefined colors and sizes.
<template> <p>I <VIcon name="heart-line" connotation="alert" label="Love" /> VIVID!</p></template>
<script setup lang="ts"> import {VIcon} from '@vonage/vivid-api-vue';</script>import { registerIcon } from '@vonage/vivid-api';
registerIcon('your-prefix');<script type="module"> import { registerIcon } from '@vonage/vivid-api'; registerIcon('your-prefix');</script>
<p> I <your-prefix-icon name="heart-line" connotation="alert" label="Love"></your-prefix-icon> VIVID!</p>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.
<script setup lang="ts">import { VIcon } from '@vonage/vivid-api-vue';</script>
<template> <VIcon label="Close dialog" name="close-line" /></template><vwc-icon label="Close dialog" name="close-line"></vwc-icon>If the component is used without a size, it will use the current font-size value.
<script setup lang="ts">import { VIcon } from '@vonage/vivid-api-vue';</script>
<template> <VIcon name="close-line" label="Close dialog" class="small-icon" /> 30px</template>
<style>.small-icon { font-size: 30px;}</style><vwc-icon name="close-line" label="Close dialog" class="small-icon"></vwc-icon>30px
<style> .small-icon { font-size: 30px; }</style>If the component is used without a connotation, it will use the current text color.
<script setup lang="ts">import { VIcon } from '@vonage/vivid-api-vue';</script>
<template> <VIcon class="icon" label="Heart icon" name="heart-solid" /></template>
<style>.icon { color: var(--vvd-color-announcement-400);}</style><vwc-icon class="icon" label="Heart icon" name="heart-solid"></vwc-icon>
<style> .icon { color: var(--vvd-color-announcement-400); }</style>| 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. |