Skip to main content
Version: 4.x

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