Getting SVG data

Maybe you are building React application and want to render icons instead of placeholders, maybe you want SVG data to merge icons. Whatever the reason, Iconify gives you access to data for all icons available in Iconify repository.

However there is a catch - icon need to be loaded first.

Loading icons

It can be simplified by including icons in bundle, but this example shows what to do if you are loading icons from API. If you bundle icons with your script, you can skip this code.

Loading icons from API is not trivial task because icons are not loaded instantly, so code needs to be asynchronous. This is sample function that loads several icons and fires callback when icons have been loaded:

/**
* Load icons
*
* @param {Array} icons List of icons to load
* @param {function} callback Function to call when icons have been loaded
*/

function preloadIconifyIcons(icons, callback) {
  var pending = icons.slice(0),
    loaded = [],
    listener = false;

  /**
   * Check if icons have been loaded
   */

  function check() {
    var stillPending = [];

    // Check if all icons have been loaded
    pending.forEach(function(icon) {
      if (Iconify.iconExists(icon)) {
        loaded.push(icon);
      } else {
        stillPending.push(icon);
      }
    });
    pending = stillPending;

    if (!pending.length) {
      // All icons have been loaded - remove event listener (if it was added) and call callback
      if (listener) {
        document.removeEventListener('IconifyAddedIcons', check);
      }
      callback(loaded);
    }
  }

  // Check if icons have been loaded
  check();
  if (pending.length) {
    // Not all icons are available - setup event listener that
    // calls check() when new icons are added to Iconify storage
    listener = true;
    document.addEventListener('IconifyAddedIcons', check);

    // Load pending icons
    Iconify.preloadImages(pending);
  }
}

/**
* Do your stuff!
*/

preloadIconifyIcons(['mdi:home', 'mdi:arrow-left'], function(icons) {
  // Icons are loaded, do whatever you want!
  console.log('Loaded icons:', icons);
});

What is going inside function preloadIconifyIcons?

  1. Function iterates every icon in pending list, checks if icon has been loaded using Iconify.iconExists, splits them into loaded and pending arrays.
  2. If there are pending icons, it sets up IconifyAddedIcons event listener and calls Iconify.preloadImages to load pending images.
  3. When event handler is triggered (it happens every time new icons are added to collection), script checks again for pending icons.
  4. When all icons have finally been loaded, script removes even listener and fires callback.

Use that or similar code in your code before retrieving icon data.

After making sure icons have been loaded you can retrieve icon data.

There are several functions that retrieve different type of data.

Iconify.getIcon

Iconify.getIcon('icon-name');

This function has only 1 parameter: icon name.

It returns object that contains icon dimensions and body in same format as it is stored in JSON data retrieved from API.

If icon does not exist, it returns null.

Example:

{
  "body": "<path d=\"M1408 768v480q0 26-19 45t-45 19H960V928H704v384H320q-26 0-45-19t-19-45V768q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7L832 200 140 777q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5T37 654L756 55q32-26 76-26t76 26l244 204V64q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z\" fill=\"currentColor\"/>",
  "width": 1664,
  "height": 1312,
  "inlineTop": -224,
  "inlineHeight": 1792,
  "verticalAlign": -0.143,
  "left": 0,
  "top": 0,
  "rotate": 0,
  "vFlip": false,
  "hFlip": false
}

Iconify.getSVG

var svg1 = Iconify.getSVG('icon-name');
var svg2 = Iconify.getSVG('icon-name', {
  'data-rotate': '90deg',
  'data-height': '32'
});

This function has 2 parameters: icon name and properties. Second parameter is optional.

It returns SVG string (or false if icon does not exist):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="0.93em" height="1em" style="vertical-align: -0.143em;-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 -224 1664 1792"><path d="M1408 768v480q0 26-19 45t-45 19H960V928H704v384H320q-26 0-45-19t-19-45V768q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7L832 200 140 777q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5T37 654L756 55q32-26 76-26t76 26l244 204V64q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z" fill="currentColor"/></svg>

Second parameter for getSVG() is object containing custom properties. It can be used to transform, resize and change color of icon. These are same properties as properties you can add to icon placeholder.

By default getSVG returns data as if icon was in inline mode. To change to block mode add 'data-inline': false to list of custom properties in second parameter.