Skip to main content
Version: 5.x

vm-icon

This component was inspired by Shoelace.

Icon libraries let you register additional icons to be used throughout the player.

An icon library is a renderless component that registers a custom set of SVG icons. The icon files can exist locally or on a CORS-enabled endpoint (eg: CDN). There is no limit to how many icon libraries you can register, and there is no cost associated with registering them, as individual icons are only requested when they're used.

By default, Vime provides the vime and material icon sets, to register your own icon library create an <vm-icon-library> element with a name and resolver function. The resolver function translates an icon name to a URL where its corresponding SVG file exists.

Refer to the examples below and in the icon component to better understand how it all works.

Usage#

<!-- Src. --><vm-icon src="/icons/my-icon.svg" label="An icon"></vm-icon>
<!-- Icon library. --><vm-icon name="pause" library="material" label="Pause"></vm-icon>

Properties#

PropertyDescriptionTypeDefault
labelAn alternative description to use for accessibility. If omitted, the name or src will be used to generate it.string ∣ undefinedundefined
libraryThe name of a registered icon library.string ∣ undefinedundefined
nameThe name of the icon to draw.string ∣ undefinedundefined
srcThe absolute URL of an SVG file to load.string ∣ undefinedundefined

Events#

EventDescriptionType
vmErrorEmitted when the icon failed to load.CustomEvent<{ status?: number ∣ undefined; }>
vmLoadEmitted when the icon has loaded.CustomEvent<void>

CSS Custom Properties#

NameDescription
--vm-icon-fillThe icon fill color.
--vm-icon-strokeThe icon stroke color.
--vm-icon-transformTransformations applied to the icon.
--vm-icon-transitionTransitions applied to the icon.

Dependencies#

Used by#