version 1.0.0
module: icons version 0.0.1
size-min gzipped: 1.99 kb (incl. dependencies: 15.32 kb)
dependencies: polyfill/polyfill-base.js, js-ext/lib/function.js, js-ext/lib/object.js, utils, event
maintanance: Marco Asbreuk

all modules

SVG Icons

This module generates icons by html-markup that is converted into svg-icons. These icons are great, small in size, some animated and can be styled through css.

Getting Started

With nodejs:

The module icons is a typical browser-module.

In the browser:

For browser-usage, ITSA has a predefined loaderfiles. Once included, a global ITSA object with default features is available. For customized loaderfiles, read: Customized build.

<script src="/itsabuild-min.js"></script>
When using your own customized build-file, this module-requirement needs to be invoked with the window-object.

The Basics

Icons can be setup with an i-element that has its icon specified with its icon-attribute:

<i icon="question"></i>

To make this work, the question.js icon-module must be included. Several icon-modules are already build inside the ITSA-core.

Styling icons

Because these icons are svg-icons, they don't apply the font css. You need to style the svg-part. This means you must know (inspect) how the icon is build, in order to style the right part. Also, there is a different approach needed to define the size vs all other style properties.

Suppose using the question-icon, you can style it like this:

Example changing size question icon

<style type="text/css">
    body i[icon="question"] svg {
        width: 5em;
        height: 5em;

And style other properties like this:

Example changing color question icon

<style type="text/css">
    body #itsa-question-icon {
        fill: #F00;

As you can see, the second example refers to #itsa-question-icon. Each icon gets a system-node defined names as: #itsa-iconName-icon, where the svg gets defined. This definition is done by the icon-module.

The styles are set with body in front, so you always will overrule any default css that comes with the specified icon.

Icons inside buttons

To make icons fit well inside buttons, you need to set an appropriate classname to the button. These are the classnames: itsa-icon, itsa=iconleft and itsa-iconright.

<button class="pure-button itsa-icon"><i icon="error"></i></button>
<button class="pure-button itsa-iconleft"><i icon="error"></i> There was an error</button>
<button class="pure-button itsa-iconright">There was an error <i icon="error"></i></button>

Develop new icons

Once the icons-module is included, window.document gets a new method: document.defineIcon(iconName, viewBoxWidth, viewBoxHeight, svgContent). Using this method, any new icon can be defined. The best way is to develop a separate module for every icon. Icons can be choosed from at sites like --> when the svg is generated, you get the viewBoxWidth, viewBoxHeight and the svgContent which is the inner-content of the svg. Every icon must have a unique iconname, or it will overrule previous definitions.

Available icons


Technical information

Icons are generated by transforming the innercontent of the i-elements. This is done during initialization (or serverside), where the i-elements get an appropriate system-childnode. DOM-watchers (mutation-observer) will take care to update whenever dom-updates need an icon.

API Docs