Icon


Keywords
css, vcl, component, icon
License
MIT
Install
npm install @vcl/icon@0.6.3

Documentation

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.