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

HTML

<!-- 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>

React

import React from 'react';

import { Icon } from '@vime/react';

function Example() {

return (

<div>

{/* Src. */}

<Icon src="/icons/my-icon.svg" label="An icon" />

{/* Icon library. */}

<Icon name="play" library="material" label="Play" />

</div>

);

}

Vue

example.vue

<template>

<div>

<!-- Src. -->

<Icon src="/icons/my-icon.svg" label="An icon" />

<!-- Icon library. -->

<Icon name="pause" library="material" label="Pause" />

</div>

</template>

<script>

import { Icon } from '@vime/vue';

export default {

components: {

Icon,

},

};

</script>

Svelte

example.svelte

<!-- Src. -->

<Icon src="/icons/my-icon.svg" label="An icon" />

<!-- Icon library. -->

<Icon name="pause" library="material" label="Pause" />

<script lang="ts">

import { Icon } from '@vime/svelte';

<script>

Stencil

class Example {

render() {

return (

<div>

{/* Src. */}

<vm-icon src="/icons/my-icon.svg" label="An icon" />

{/* Icon library. */}

<vm-icon name="play" library="material" label="Play" />

</div>

);

}

}

Angular

example.html

<!-- Src. -->

<vm-icon src="/icons/my-icon.svg" label="An icon"></vm-icon>

<!-- Icon library. -->

<vm-icon name="play" library="material" label="Play"></vm-icon>

Properties

Property	Description	Type	Default
label	An alternative description to use for accessibility. If omitted, the name or src will be used to generate it.	string ∣ undefined	undefined
library	The name of a registered icon library.	string ∣ undefined	undefined
name	The name of the icon to draw.	string ∣ undefined	undefined
src	The absolute URL of an SVG file to load.	string ∣ undefined	undefined

Events

Event	Description	Type
vmError	Emitted when the icon failed to load.	CustomEvent<{ status?: number ∣ undefined; }>
vmLoad	Emitted when the icon has loaded.	CustomEvent<void>

CSS Custom Properties

Name	Description
--vm-icon-fill	The icon fill color.
--vm-icon-stroke	The icon stroke color.
--vm-icon-transform	Transformations applied to the icon.
--vm-icon-transition	Transitions applied to the icon.

Dependencies

Used by

• vm-caption-control
• vm-fullscreen-control
• vm-menu-item
• vm-mute-control
• vm-pip-control
• vm-playback-control
• vm-settings-control