vime-icons

Loads an SVG sprite and inserts it into the document. By default it loads the Vime icons sprite from the JSDELIVR CDN.

Usage

HTML

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-icons href="/icons/sprite.svg"></vime-icons>

</vime-ui>

</vime-player>

React

import React from 'react';

import { VimePlayer, VimeUi, VimeIcons } from '@vime/react';

function Example() {

return (

<VimePlayer>

{/* ... */}

<VimeUi>

{/* ... */}

<VimeIcons href="/icons/sprite.svg" />

</VimeUi>

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeIcons href="/icons/sprite.svg" />

</VimeUi>

</VimePlayer>

</template>

<script>

import { VimePlayer, VimeUi, VimeIcons } from '@vime/vue';

export default {

components: {

VimePlayer,

VimeUi,

VimeIcons,

},

};

</script>

Svelte

example.svelte

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeIcons href="/icons/sprite.svg" />

</VimeUi>

</VimePlayer>

<script lang="ts">

import { VimePlayer, VimeUi, VimeIcons } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vime-player>

{/* ... */}

<vime-ui>

{/* ... */}

<vime-icons href="/icons/sprite.svg" />

</vime-ui>

</vime-player>

);

}

}

Angular

example.html

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-icons href="/icons/sprite.svg"></vime-icons>

</vime-ui>

</vime-player>

Properties

Property	Attribute	Description	Type	Default
href	href	The URL to an SVG sprite to load.	string	'https://cdn.jsdelivr.net/npm/@vime/core@latest/icons/sprite.svg'

Dependencies

Used by

• vime-default-ui

Graph

graph TD;

vime-default-ui --> vime-icons

style vime-icons fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS