@vcl/icon

VCL icon

Icon.

Features

Can be used to display icons from the following sources:

• img-tag based media objects (bitmaps like .png or vectors like .svg can be used)
• CSS class based (for media objects embedded as background-image or glyphs from icon fonts),
• inline SVG, use-tag refs.

There is no size defined by the icon class. Sizing should be done by the surrounding container, the inherited font-size or modifiers like vclIconSize1.

Usage

Based on an img tag using bitmap (PNG) and vector (SVG) in this example.

img-tag based media objects example

Based on a background image. The size is defined by the container and the use of vclLayoutFit on the div carrying the background image.

background image based media objects example

CSS class based (icon font).

CSS class based with icon font example

Inline SVG based.

inline-svg example

Classes

• vclIcon

Modifiers

• vclIconSize1: Default size for non icon-font based icons ~24px.
• vclIconSize2: ~36px.
• vclIconSize3: ~48px.

Variables

Demo

example.html on GH-pages.