Metalsmith plugin icons

by Kevin Van Lierde

HTML

<link rel="stylesheet" href="https://cdn.symbolset.com/94440cd0456394a198fb9c3302ad80fe007e5eff/symbolset.css">
<h1>Metalsmith plugin icons
  <small>
    <input type="search" id="search" placeholder="Search...">
  </small>
</h1>
<div id="icons">
<div><i class="ss-cursor"></i></div>
<div><i class="ss-crosshair"></i></div>
<div><i class="ss-search"></i></div>
<div><i class="ss-zoomin"></i></div>
<div><i class="ss-zoomout"></i></div>
<div><i class="ss-view"></i></div>
<div><i class="ss-attach"></i></div>
<div><i class="ss-link"></i></div>
<div><i class="ss-unlink"></i></div>
<div><i class="ss-move"></i></div>
<div><i class="ss-write"></i></div>
<div><i class="ss-writingdisabled"></i></div>
<div><i class="ss-erase"></i></div>
<div><i class="ss-compose"></i></div>
<div><i class="ss-lock"></i></div>
<div><i class="ss-unlock"></i></div>
<div><i class="ss-key"></i></div>
<div><i class="ss-backspace"></i></div>
<div><i class="ss-ban"></i></div>
<div><i class="ss-smoking"></i></div>
<div><i class="ss-nosmoking"></i></div>
<div><i class="ss-trash"></i></div>
<div><i class="ss-target"></i></div>
<div><i class="ss-tag"></i></div>
<div><i class="ss-bookmark"></i></div>
<div><i class="ss-flag"></i></div>
<div><i class="ss-like"></i></div>
<div><i class="ss-dislike"></i></div>
<div><i class="ss-heart"></i></div>
<div><i class="ss-star"></i></div>
<div><i class="ss-sample"></i></div>
<div><i class="ss-crop"></i></div>
<div><i class="ss-layers"></i></div>
<div><i class="ss-layergroup"></i></div>
<div><i class="ss-pen"></i></div>
<div><i class="ss-bezier"></i></div>
<div><i class="ss-pixels"></i></div>
<div><i class="ss-phone"></i></div>
<div><i class="ss-phonedisabled"></i></div>
<div><i class="ss-touchtonephone"></i></div>
<div><i class="ss-mail"></i></div>
<div><i class="ss-inbox"></i></div>
<div><i class="ss-outbox"></i></div>
<div><i class="ss-chat"></i></div>
<div><i class="ss-user"></i></div>
<div><i class="ss-users"></i></div>
<div><i class="ss-usergroup"></i></div>
<div><i...

CSS

html, body {
  font-family: 'TimesNewRoman', 'Times New Roman', 'Times', 'Baskerville', 'Georgia', serif;
  padding: 0;
  margin: 0;
  position: relative;
  color: #333;
}
h1 {
  position: fixed;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0 3px gray;
  margin: 0;
  padding: 1rem;
  z-index: 1;
  background: white;
  top: 0;
  left: 0;
  right: 0;
}
#icons {
  margin-top: 75px; 
}
#icons > div {
  float: left;
  position: relative;
  padding: .125rem;
  border: 1px solid transparent;
  border-radius: 5px;
}
#icons > div:hover {
  float: left;
  position: relative;
  padding: .125rem;
  z-index: 2;
  border: 1px solid #daae20;
  color: #daae20;
}
#icons > div:hover::after {
  content: attr(data-title);
  display: block;
  position: absolute;
  top: 100%; 
  left: 0;
  background: white;
  box-shadow: 0 0 3px #daae20;
  padding: .25rem .5rem;
  z-index: 999;
  font-family: sans-serif;
  color: #333;
}
#search {
  float: right;
}
i[class^="ss-"] {
  font-size: 2em;
}

JavaScript

var icons = document.getElementById('icons').children;
Array.prototype.forEach.call(icons, function(icon) {
  icon.dataset.title = icon.firstElementChild.className.slice(3);
});

var search = document.getElementById('search');
search.addEventListener('input', function(e) {
  var value = e.target.value;
  Array.prototype.forEach.call(icons, function(icon) {
  	if (icon.dataset.title.match(value)) {
    	icon.style.display = 'inline';
    } else {
    	icon.style.display = 'none';
    }
  })
});