Version: 5.x

vm-icon-library

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#

<!-- Change the icons property to the name of the library you'd like to use. -->
<vm-player icons="material">
<!-- ... -->
<vm-ui>
<!-- Register a custom icon library. -->
<vm-icon-library name="my-library"></vm-icon-library>
</vm-ui>
</vm-player>
<script>
const library = document.querySelector('vm-icon-library[name="my-library"]');
library.resolver = (iconName) => `/icons/${iconName}.svg`;
</script>

Properties#

PropertyDescriptionTypeDefault
nameThe name of the icon library to register. Vime provides some default libraries out of the box such as vimeor material.string ∣ undefinedundefined
resolverA function that translates an icon name to a URL where the corresponding SVG file exists. The URL can be local or a CORS-enabled endpoint.((name: string) => string) ∣ undefinedundefined