function icon(name, { size = '', className = '' }) {
  const classes = `icon icon--${name} icon--${size} ${className}`.trim();

  var icon =  '<svg class="icon__cnt">' +
                '<use xlink:href="/sprite.svg#' + name + '-icon" />' +
              '</svg>';

  var html =  '<div class="' + classes + '">' +
                wrapSpinner(icon, classes) +
              '</div>';

  return html;
}

function wrapSpinner(html, klass) {
  if (klass.indexOf('spinner') > -1) {
    return '<div class="icon__spinner">' + html + '</div>';
  } else {
    return html;
  }
}

export default function renderIcons() {
    var render = true;
    var icons = document.querySelectorAll('[data-icon]');

    for (var i = 0; i < icons.length; i++) {
      var currentIcon = icons[i];
      var name        = currentIcon.getAttribute('data-icon');
      var options = {
        className:  currentIcon.className,
        size:   currentIcon.getAttribute('data-size')
      };

      currentIcon.insertAdjacentHTML('beforebegin', icon(name, options));
      currentIcon.parentNode.removeChild(currentIcon);
    }
 }