Working with Smart Icons

Smart Icons embed JavaScript right in SVG. Working together they can do some pretty smart things.

Iconic Smart Icons range in utility from changing display states and managing toggles via data attributes to loading and playing audio files, being fully controllable via JavaScript APIs available on the icons.

Data attributes

Iconic's File icon, for example, is more than a static image. The file extension text it displays is configurable using the data-file-extension attribute. No more spending time hand creating icons for all the special filetypes you need.

Need a file icon for your X-ray crystallography electron density files? We've got you covered.

ccp4 file
<img class="iconic" data-src="file.svg" data-file-extension="CCP4">
This is why Iconic only has a single file icon. You can dynamically generate every one you need, saving you production time and also reducing the assets your user has to download. The same single SVG file is used whether you use one or one hundred file icons.

JavaScript APIs

Smart Icons can also be controlled using their JavaScript APIs. Continuing with the file icon example, if you wanted to change or set the extension via JavaScript at anytime you could call setFileExtension() on the icon:


Refreshing icons

Sometimes it makes sense or is easier to change an icon's data attributes instead of using its API calls directly. In that case you can make your attribute change(s) and then pass your icon to the iconic.js update method.

myIcon.setAttribute('data-file-extension', 'XML');

Tip: If you call update() without passing an icon, all of your Iconic icons will be updated. Great for making multiple changes and refreshing everything with a single call.