vm-icon-library

This component was inspired by Shoelace.

Loads and renders an SVG icon. The icon be loaded from an icon library or from an absolute URL via the src property. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a custom icon library.

Usage

HTML

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

React

import React from "react";

import { Player, Ui, IconLibrary } from "@vime/react";

function Example() {

return (

{/* Change the icons property to the name of the library you'd like to use. */}

<Player icons="material">

{/* ... */}

<Ui>

{/* Register a custom icon library. */}

<IconLibrary name="my-library" resolver={(iconName) => `/icons/${iconName}.svg`} />

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<!-- Change the icons property to the name of the library you'd like to use. -->

<Player icons="material">

<!-- ... -->

<Ui>

<!-- Register a custom icon library. -->

<IconLibrary name="my-library" :resolver="customResolver" />

</Ui>

</Player>

</template>

<script>

import { Player, Ui, IconLibrary } from '@vime/vue';

export default {

data() {

return {

customResolver: iconName => `/icons/${iconName}.svg`,

};

},

components: {

Player,

Ui,

IconLibrary,

},

};

</script>

Svelte

example.svelte

<!-- Change the icons property to the name of the library you'd like to use. -->

<Player icons="material">

<!-- ... -->

<Ui>

<!-- Register a custom icon library. -->

<IconLibrary name="my-library" resolver={(iconName) => `/icons/${iconName}.svg`} />

</Ui>

</Player>

<script lang="ts">

import { Player, Ui, IconLibrary } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

{/* 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" resolver={(iconName) => `/icons/${iconName}.svg`} />

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

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

[resolver]="customResolver"

></vm-icon-library>

</vm-ui>

</vm-player>

example.ts

class Example {

customResolver = (iconName: string) => `/icons/${iconName}.svg`;

}

Properties

Property	Description	Type	Default
name	The name of the icon library to register. Vime provides some default libraries out of the box such as vimeor material.	string ∣ undefined	undefined
resolver	A 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) ∣ undefined	undefined