[SO] IconMeister Example #1

iconmeister.github.io

by Danny Engelman

HTML

<h2>
  <a href="iconmeister.github.io">
    <svg-icon is="design" stroke="blue" fill="red"></svg-icon> IconMeister.github.io
  </a> Toolbar Example #1
</h2>
Select multiple with Control Key
<style>
  [is="design"] {
    background:white;
    display: inline-block;
    width: 50px;
    vertical-align: middle;
  }

  icon-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
    grid-gap: .2em;
  }

  svg-icon {
    display: block;
    cursor: pointer;
    background: grey;
    --svg-icon-stroke: black;
  }

  svg-icon[selected] {
    background: green;
  }

  svg-icon[selected]:hover {
    background: lightgreen;
  }

  svg-icon:hover {
    background: lightgrey;
  }

</style>

<icon-toolbar>
  <svg-icon is="menu"></svg-icon>
  <svg-icon is="settings"></svg-icon>
  <svg-icon is="renew"></svg-icon>
  <svg-icon is="bold"></svg-icon>
  <svg-icon is="arrowleft" stroke=darkred></svg-icon>
  <svg-icon is="pointright"></svg-icon>
  <svg-icon is="book" fill=red></svg-icon>
  <svg-icon is="camera" opacity=.2 stroke=red></svg-icon>
  <svg-icon is="edit" rotate=45 fill=blue stroke=white></svg-icon>
  <svg-icon is="teams" scale=.5 img=0></svg-icon>
</icon-toolbar>
<script>
  customElements.define("icon-toolbar", class extends HTMLElement {
    connectedCallback() {
      this.icons = [...this.querySelectorAll("svg-icon")].map(icon => {
        icon.saved = [...icon.attributes]; // store default HTML attributes for every icon
        return icon;
      });
      this.addEventListener("click", (evt) => {
        let select = (icon, selected = true) => {
          if (selected) {
            icon.setAttribute("selected", "selected");
            icon.scale = 1.2;
          } else {
            icon.removeAttribute("selected");
            icon.scale = 1;
            icon.saved.map(attr => icon[attr.name] = attr.value); // restore default HTML attributes
          }
        }
        let clickedicon = evt.target.closest("svg-icon");
       ...

CSS

body{
  font-family:Arial;
}