JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<html>
  <body>
    List of icons
    <div class="icons"></div>
  </body>
  <script>
    console.log('hello world')    
    
    const iconsContainer = document.querySelector('.icons');

    async function fetchIcons() {
      // const res = await fetch('https://iconur.com/api/icons');
      const res = await fetch("https://cors-anywhere.herokuapp.com/https://iconur.com/api/icons");
      const data = await res.json();
      console.log(data.icons)
      data.icons.map(icon => generateSVG(icon))
      return data.icons;
    }

    function generateSVG(icon) {
      const paths = icon.path;
      const svg = document.createElement('svg');
      svg.setAttribute('width', '32');
      svg.setAttribute('height', '32');
      svg.setAttribute('viewBox', '0 0 24 24');
      svg.setAttribute('fill', 'none');
      svg.setAttribute('stroke', 'black');
      svg.setAttribute('strokeWidth', '2px');
      svg.setAttribute('strokeLinecap', 'round');
      svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

      paths.forEach((path, index) => {
        const p = document.createElement('path');
        p.setAttribute('d', path);
        svg.appendChild(p);
      });

      iconsContainer.appendChild(svg);
    }

    fetchIcons()


  </script>
</html>