iconmeister.github.io SVG-ICON playground

!!! JSfiddle playground for iconmeister.github.io website

by Danny Engelman

HTML

<h2>
  <a href="iconmeister.github.io">IconMeister.github.io</a> playground
</h2>
<style>
  svg-icon {
    display: block;
    background: grey;
    cursor: pointer;
  }

  path {
    /* affects SVGs not IMGs */
    stroke:lightcoral;
    stroke-width:.5;
  }

</style>
<h2>
  Toolbar with IMGs
</h2>
<style>
  svg-icon::before{
    content: attr(im);
  }
</style>
<div id=toolBar class=icons>
  <svg-icon is="cl-core-cog-line" im="&nbsp;&Iopf;&copf;&oopf;&nopf;&Mopf;&eopf;&iopf;&sopf;&topf;&eopf;&ropf;"></svg-icon>
  <svg-icon is="f-menu"></svg-icon>
  <svg-icon is="bi-cloud-download" width=.6></svg-icon>
</div>
<h2>
  Toolbar with SVGs  Toolbar with SVGs

</h2>
<div id=toolBar class=icons>
  <svg-icon img="svg" is="cl-core-cog-line"></svg-icon>
  <svg-icon img="svg" is="f-menu"></svg-icon>
  <svg-icon img="svg" is="bi-cloud-download" width=.6></svg-icon>
</div>
<h2>
  Icons with attributes
</h2>
<div class=icons>
  <svg-icon stroke=red fill=blue is="bi-gear"></svg-icon>
  <svg-icon stroke=red fill=blue is="f-settings"></svg-icon>
  <svg-icon stroke=red fill=blue is="cl-core-cog-line"></svg-icon>

  <svg-icon is="f-menu" rotate="45" tile="green"></svg-icon>
  <svg-icon is="bi-list" border="stroke='red' stroke-width='4' stroke-dasharray='4 4 4'"></svg-icon>
  <svg-icon is="cl-core-bars-line" opacity=".2"></svg-icon>

  <svg-icon is="bi-cloud-download" scale=.5></svg-icon>
  <svg-icon is="f-download"></svg-icon>
  <svg-icon is="cl-technology-install-line"></svg-icon>

</div>
<h2>
  Generated HTML:
</h2>
<div id=listIcons class=icons></div>
<script>
  window.onload = () => {
    //Click any icon
    document.addEventListener("click", evt => {
      let clicked = evt.composedPath()[0]; //on SVGs you can click on individual PATH elements
      let icon = clicked.closest("svg-icon");
      if (icon) {
        console.log(`clicked: ${clicked.nodeName} element. In icon:${icon.is}`);
        icon.tile = icon.tile == 'lightgreen' ? 'grey' : 'lightgreen';
      }
    })

   ...

CSS

body{
  font-family:Arial;
}
.icons{
  max-width:350px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:.2em;
}

JavaScript

// All path data from B-ootstrap, F-eather and Cl-arity Icons
const $ICONS = {
  "bi-gear": "box:20;fill:#000;width:.1;path:M10.8 3.6a.9.9 0 00-1.6 0L9 4a1.9 1.9 0 01-2.7 1.2L6 4.9c-.8-.4-1.6.4-1.2 1.2l.2.3A1.9 1.9 0 013.9 9h-.3a.9.9 0 000 1.7l.3.1a1.9 1.9 0 011.2 2.7l-.2.3c-.4.8.4 1.6 1.2 1.2l.3-.2A1.9 1.9 0 019 16.1v.3c.3.8 1.5.8 1.7 0l.1-.3a1.9 1.9 0 012.7-1.2l.3.2c.8.4 1.6-.4 1.2-1.2l-.2-.3a1.9 1.9 0 011.2-2.7h.3a.9.9 0 000-1.7L16 9a1.9 1.9 0 01-1.2-2.7l.2-.3c.4-.8-.4-1.6-1.2-1.2l-.3.2A1.9 1.9 0 0111 3.9v-.3zm-2.6-.3c.5-1.7 3-1.7 3.6 0v.4a.9.9 0 001.3.5l.3-.2c1.7-.9 3.5 1 2.6 2.6l-.2.3a.9.9 0 00.5 1.2l.4.1c1.7.5 1.7 3 0 3.6h-.4a.9.9 0 00-.5 1.3l.2.3c.9 1.7-1 3.5-2.6 2.6l-.3-.2a.9.9 0 00-1.2.5l-.1.4c-.5 1.7-3 1.7-3.6 0v-.4a.9.9 0 00-1.3-.5l-.3.2c-1.7.9-3.5-1-2.6-2.6l.2-.3a.9.9 0 00-.5-1.2l-.4-.1c-1.7-.5-1.7-3 0-3.6h.4a.9.9 0 00.5-1.3L4 6.6C3.1 4.9 5 3 6.6 4l.3.2A.9.9 0 008 3.7l.1-.4z,fill-rule='evenodd';path:M10 7.8a2.2 2.2 0 100 4.4 2.2 2.2 0 000-4.4zM6.8 10a3.2 3.2 0 116.4 0 3.2 3.2 0 01-6.4 0z,fill-rule='evenodd'",

  "f-settings": "box:24;width:2;path:M9 12a3 3 0 1 06 0a3 3 0 1 0 -6 0M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z",

  "cl-core-cog-line": "box:36;fill:#000;strokewidth:.1;path:M18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5...