src/main/assets/icon.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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);
    }
 }