JavaScript

A5.uicon Namespace

Description

The namespace for utility methods for icon creation and updating.

Discussion

These methods are used internally by controls in the A5 namespace to abstract icon creation and updating away from specific icon types. There are three types of icons that can be created: image icon, CSS icon, and SVG icon.

Image icons are specified by passing in the URL to an image, and will be output in an IMG tag.

CSS icons are specified by prefixing the icon string with "cssIcon=", and will output an I tag with the specified class name(s). After the prefix a list of class names is specified. Inline styling can be applied by adding the CSS directly on to the end of the string inside "{" "}". For example: "cssIcon=icon iconError {color: red;}". This would create a CSS icon with the class names of "icon" and "iconError", and an inline style of "color: red;".

SVG icons are specified by prefixing the icon string with "svgIcon=", and will output a SVG tag. After the prefix, the path to the SVG SYMBOL to use is specified (currently many browsers don't allow for the use of SVG symbols from and external resource, so the path should be a "#" followed by the ID of the SVG SYMBOL to use). A ":" is after the path to separate out the defined size and/or class name(s) to apply to the SVG icon. If the first argument after the ":" are class names, then a "," can be used to specify a size. Otherwise the size of the SVG icon should directly follow the ":". A single size can be passed in, or a width and height can be specified by adding a " " between them. Inline styling can be applied by adding the CSS directly on to the end of the string inside "{" "}". For example: "svgIcon=#icon-error:iconErr,24px 32px{fill: red}". This would create a SVG icon that uses the SVG SYMBOL with the ID "icon-error", would apply the class name "iconErr" to it, set the icon size to "24px" wide and "32px" high, and override the fill color to "red".

Methods

element Method

Get the HTML element for an icon.

html Method

Get the HTML for an icon.

update Method

Update and icon.