@vcl/icon

VCL icon

Icon.

Features

Can be used to display icons from the following sources:

• img-tag based media objects.
• CSS class based (for media objects embedded as background-image or icon fonts),
• inline SVG, use-tag refs.

There is no size set. Sizing should be done inherently by the used object, the surrounding font-size or additional classes.

Usage

Based on an img tag.

img-tag based media objects example

Based on a background image.

background image based media objects example

CSS class based (icon font).

CSS class based with icon font example

Innline SVG based.

inline-svg example

Classes

• vclIcon

Modifiers

• vclIconSize1: Default size for non font-size controlled sizing ~24px.
• vclIconSize2: ~36px.
• vclIconSize3: ~48px.

Variables

Demo

example.html on GH-pages.