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.
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.
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.
<img class="iconic" data-src="file.svg" data-file-extension="CCP4">
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:
myIcon.setFileExtension('MOV');
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');
IconicJS().update(myIcon);
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.