vime-icon

Renders and displays an SVG icon. The SVG markup can be passed in directly or it can be loaded via a URL. It's preferrable to load a sprite via vime-icons and reference the icon using the href property.

Usage

<!-- Markup -->
<vime-icon>
<rect width="300" height="100" />
</vime-icon>
<!-- URL -->
<vime-icon href="#vime-play"></vime-icon>

Properties

PropertyAttributeDescriptionTypeDefault
hrefhrefThe URL to an SVG element or fragment to load.string โˆฃ undefinedundefined

Slots

SlotDescription
Used to pass in SVG markup to be drawn by the browser.

CSS Custom Properties

NameDescription
--vm-icon-colorThe color of the icon.
--vm-icon-heightThe height of the icon.
--vm-icon-scaleThe amount to scale the size of the icon up or down by.
--vm-icon-widthThe width of the icon.

Dependencies

Used by

Graph

graph TD;
vime-caption-control --> vime-icon
vime-fullscreen-control --> vime-icon
vime-menu-item --> vime-icon
vime-mute-control --> vime-icon
vime-pip-control --> vime-icon
vime-playback-control --> vime-icon
vime-settings-control --> vime-icon
style vime-icon fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS