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
39
40
41
42

const spritesUrl = new URL('evil-icons/assets/sprite.svg', import.meta.url)

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

  var icon =  '<svg class="icon__cnt">' +
                `<use xlink:href='${spritesUrl}#${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 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)
    }
 }