Icon

Displays icons from the Vivid Icons Library using predefined colors and sizes.

Usage

import '@vonage/vivid/icon';

or, if you need to use a unique prefix:

import { registerIcon } from '@vonage/vivid';

registerIcon('your-prefix');

<script setup lang="ts">
	import { VIcon } from '@vonage/vivid-vue';
</script>
<template>
	<VIcon name="close-line" />
</template>

Label

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.

Custom Size

If the component is used without a size, it will use the current font-size value.

Custom Color

If the component is used without a connotation, it will use the current text color.

API Reference

Properties

Name	Type	Description
aria-current	Enum: `page` `step` `location` `date` `time` `true` `false`	Indicates the element that represents the current item within a container or set of related elements.
connotation	Enum: `accent` `cta` `success` `alert` `warning` `information`	The connotation the icon should have.
size	Enum: -6 -5 -4 -3 -2 -1 0 1 2 3 4 5
name	Enum: `[icon-name]`	Indicates which icon to resolve. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/

Events

Name	Event Type	Description
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.

Slots

Name	Description
default	Default slot.