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