feat: A lot of new icons, a lot got renamed

docs/index.html

@@ -47,13 +47,13 @@
         width: 70px;
         height: 70px;
         margin-bottom: 10px;
-        display: inline-block;
+        display: none;
         text-align: center;
         transition: color 300ms;
       }
 
-      .icon.hide {
-        display: none;
+      .icon.show {
+        display: inline-block;
       }
 
       .icon:hover {

docs/index.js

@@ -1,12 +1,11 @@
 const paths = require('../paths')
 const iconNames = Object.keys(paths)
-const iconSearch = require('simple-text-search')(iconNames)
 const icons = require('../index')(paths, 'vendor-prefix')
 const debounce = require('lodash.debounce')
 
 function toIcon (name) {
   return `
-    <div class="icon" name="${name}">
+    <div class="icon show" name="${name}">
       ${icons.getIcon(name, `title="${name}"`)}
       <input type="text" value="${name}" autocorrect="false" spellcheck="false"/>
     </div>
@@ -18,48 +17,54 @@ const body = `
   ${icons.getSymbols()}
 `
 
-if (typeof window !== 'undefined') {
-  if (window.document && window.document.body) attach()
-  window.document.addEventListener('DOMContentLoaded', attach)
+function attach () {
+  const search = document.createElement('div')
+  search.className = 'panel'
+  search.innerHTML = '<input class="search" type="text" placeholder="Search for some icons...">'
 
-  function attach () {
-    const search = document.createElement('div')
-    search.className = 'panel'
-    search.innerHTML = '<input class="search" type="text" placeholder="Search for some icons...">'
+  const wrapper = document.createElement('div')
+  wrapper.className = 'icons'
+  wrapper.innerHTML = body
 
-    const wrapper = document.createElement('div')
-    wrapper.className = 'icons'
-    wrapper.innerHTML = body
+  document.body.appendChild(search)
+  document.body.appendChild(wrapper)
 
-    document.body.appendChild(search)
-    document.body.appendChild(wrapper)
+  const icons = [...wrapper.querySelectorAll('.icon')].map((element) => ({
+    name: element.attributes.name.value,
+    element
+  }))
 
-    search.querySelector('input').addEventListener('keyup', debounce(function (evt) {
-      console.log(evt.target.value)
-      wrapper.querySelectorAll('.icon').forEach(function (icon) {
-        icon.className = icon.className = 'icon hide'
-      })
+  const iconSearch = require('simple-text-search')(icons, 'name')
+  search.querySelector('input').addEventListener('keyup', debounce(function (evt) {
+    if (!evt.target.value) {
+      for (const { element } of iconSearch()) element.className = 'icon show'
+      return
+    }
 
-      const results = iconSearch(evt.target.value)
-      results.forEach(function (iconName) {
-        const icon = wrapper.querySelector(`[name=${iconName}]`)
-        if (icon) icon.className = 'icon'
-      })
-    }), 100)
+    for (const { element } of iconSearch()) element.className = 'icon'
 
-    wrapper.addEventListener('click', function (evt) {
-      if (!evt.target || evt.target.className !== 'icon') return
+    for (const {element} of iconSearch(evt.target.value)) {
+      element.className = 'icon show'
+    }
+  }), 100)
 
-      const el = evt.target.querySelector('input')
-      const name = el.value
-      el.select()
+  wrapper.addEventListener('click', function (evt) {
+    if (!evt.target || evt.target.className !== 'icon') return
 
-      try {
-        document.execCommand('copy')
-        console.log(`Copied the icon '${name}' into the clipboard`)
-      } catch (err) {
-        return console.error('Copy is not supported', err)
-      }
-    })
-  }
+    const el = evt.target.querySelector('input')
+    const name = el.value
+    el.select()
+
+    try {
+      document.execCommand('copy')
+      console.log(`Copied the icon '${name}' into the clipboard`)
+    } catch (err) {
+      return console.error('Copy is not supported', err)
+    }
+  })
+}
+
+if (typeof window !== 'undefined') {
+  if (window.document && window.document.body) attach()
+  window.document.addEventListener('DOMContentLoaded', attach)
 }