Module-documentationModule-documentationThis 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.
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><script>
</script>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.
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:
<style type="text/css">
body i[icon="question"] svg {
width: 5em;
height: 5em;
}
</style>
And style other properties like this:
<style type="text/css">
body #itsa-question-icon {
fill: #F00;
}
</style>
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.
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>
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 icomoon.io --> 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.
alert
error
exclamation
info
minus
plus
question
printer
cart
audio-anim
grid-anim
radar-anim
speaking-anim
spinner-circle-anim
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.