Get it working with the imported icons.

.npmignore

@@ -0,0 +1 @@
+Gruntfile.js

build.js

@@ -1,47 +1,14 @@
 #!/usr/bin/env node
 'use strict';
 
+console.log(new Date().toTimeString());
 var shell = require('shelljs');
 
+const icons = require('photon-icons/photon-icons.json');
+const icons_dir = require.resolve('photon-icons/photon-icons.json').replace('photon-icons.json', 'icons/');
+
 shell.rm('-rf', 'dist');
 shell.mkdir('dist');
-shell.cp('-R', ['html/*', 'icons'], 'dist');
-const dirs = shell.ls('-R', 'icons');
-
-let currDir;
-var images = [];
-for (let file of dirs) {
-  if (!file.endsWith('.svg')) {
-    if (currDir) {
-      images.push(currDir);
-    }
-    currDir = {'name': file, 'items': []};
-  } else {
-    file = file.replace(currDir.name + '/','');
-    currDir.items.push(file);
-  }
-}
-if (currDir) {
-  images.push(currDir);
-}
-images = images.sort((a, b) => {
-  const aName = a.name;
-  const bName = b.name;
-  if (aName === 'new') {
-    return -1;
-  }
-  if (bName === 'new') {
-    return 1;
-  }
-  if (aName.startsWith('deprecated-')) {
-    if (bName.startsWith('deprecated-')) {
-      return aName.localeCompare(bName);
-    }
-    return 1;
-  }
-  if (bName.startsWith('deprecated-')) {
-    return -1;
-  }
-  return aName.localeCompare(bName);
-});
-shell.ShellString('var data = ' + JSON.stringify(images, null, '  ')).to('dist/viewer/js/data.js');
+shell.cp('-R', 'html/*', 'dist');
+shell.cp('-R', icons_dir, 'dist');
+shell.ShellString('var data = ' + JSON.stringify(icons.icons, null, '  ')).to('dist/viewer/js/data.js');

html/viewer/css/app.css

@@ -257,9 +257,9 @@ input:checked + .toggle:before {
   background-color: var(--white);
 }
 
-/** Directory display **/
+/** Category display **/
 
-.directory-display::before {
+.category-display::before {
   content: attr(data-category);
   color: var(--grey-50);
   display: block;
@@ -268,7 +268,7 @@ input:checked + .toggle:before {
   margin-bottom: 20px;
 }
 
-.directory-display {
+.category-display {
   border-bottom: 1px solid var(--grey-30);
   padding-bottom: 20px;
   margin-bottom: 40px;

html/viewer/js/app.js

@@ -38,89 +38,89 @@ var IconViewer = {
     icons.forEach(e => e.classList.toggle("selected", e === element));
   },
 
-  displayDirectory: function(directory) {
-    var directoryEl = createNode({
+  displayCategory: function(category) {
+    let categoryEl = createNode({
       tagName: "div",
       attributes: {
-        class: "directory-display",
-        "data-category": directory.name
+        class: "category-display",
+        "data-category": category.name
       },
       parent: this.iconListEl
     });
-    var items = directory.items;
-    for (var i = 0; i < items.length; i++) {
-      this.displayIcon(items[i], directoryEl, directory.name);
+    for (let item of category.items) {
+      this.displayIcon(item, categoryEl, category.name);
     }
   },
 
-  displayIcon: function(icon, container, dirName) {
-    var iconContainer = createNode({
+  displayIcon: function(icon, container, category) {
+    let iconContainer = createNode({
       tagName: "div",
       attributes: {
         class: "icon-display",
-        "data-uri": IconList.getFullIconURI(icon, dirName),
-        download: icon,
+        "data-uri": IconList.getFullIconURI(icon),
+        download: icon.name + '.svg',
         target: "_blank",
-        "data-icon": icon.replace("deprecated-", "").replace(".svg", "").replace(/\-/g, " "),
-        "data-category": dirName,
-        "data-path": `${dirName}/${icon}`,
-        "data-filename": icon,
-        "data-deprecated": icon.startsWith("deprecated-")
+        "data-icon": icon.name.toLowerCase(),
+        "data-category": category,
+        "data-tags": (icon.tags || []).join(','),
+        "data-path": icon.location,
+        "data-filename": icon.name + '.svg',
+        "data-deprecated": icon.tags.indexOf("deprecated") != -1
       },
       parent: container
     });
-    var image = createNode({
+    let image = createNode({
       tagName: "img",
       attributes: {
-        src: IconList.getFullIconURI(icon, dirName)
+        src: IconList.getFullIconURI(icon)
       },
       parent: iconContainer
     });
   },
 
   filterIcons: function() {
-    var query = "";
+    let query = "";
     if (this.searchEl) {
       query = this.searchEl.value.trim();
     }
-    var allIcons = [].slice.call(this.iconListEl.querySelectorAll(".icon-display"));
+    let allIcons = [].slice.call(this.iconListEl.querySelectorAll(".icon-display"));
     location.hash = "#" + query;
+    query = query.toLowerCase();
     if (this.searchEl) {
       if (query == "") {
         this.searchEl.classList.remove("filled");
       } else {
         this.searchEl.classList.add("filled");
       }
     }
-    for (var i = 0; i < allIcons.length; i++) {
-      var icon = allIcons[i];
+    for (let icon of allIcons) {
       if (icon.dataset.icon.indexOf(query) > -1 ||
           icon.dataset.category.indexOf(query) > -1 ||
+          icon.dataset.tags.indexOf(query) > -1 ||
           query == "") {
         icon.classList.remove("hidden");
       } else {
         icon.classList.add("hidden");
       }
     }
-    var allDirs = [].slice.call(this.iconListEl.querySelectorAll(".directory-display"));
-    for (var i = 0; i < allDirs.length; i++) {
-      var dir = allDirs[i];
-      var numberOfHiddenItems = dir.querySelectorAll(".hidden").length;
-      if ((dir.dataset.category.indexOf(query) > -1) ||
+    let categories = [].slice.call(this.iconListEl.querySelectorAll(".category-display"));
+    for (let category of categories) {
+      let numberOfHiddenItems = category.querySelectorAll(".hidden").length;
+      if ((category.dataset.category.indexOf(query) > -1) ||
           query == "") {
-        dir.classList.remove("hidden");
-      } else if (numberOfHiddenItems == dir.childNodes.length) {
-        dir.classList.add("hidden");
+        category.classList.remove("hidden");
+      } else if (numberOfHiddenItems == category.childNodes.length) {
+        category.classList.add("hidden");
       } else {
-        dir.classList.remove("hidden");
+        category.classList.remove("hidden");
       }
     }
   },
 
   showAllIcons: function() {
-    var directories = IconList.getAllDirectories();
-    for (var directory of directories) {
-      this.displayDirectory(directory);
+    let categories = IconList.getAllCategories();
+    for (let category of categories) {
+      this.displayCategory(category);
     }
     document.getElementById("loading").remove();
     this.iconListEl.removeAttribute("hidden");
@@ -137,10 +137,10 @@ window.addEventListener("DOMContentLoaded", IconViewer.init.bind(IconViewer));
 
 // Helpers
 function createNode(options) {
-  var el = document.createElement(options.tagName || "div");
+  let el = document.createElement(options.tagName || "div");
 
   if (options.attributes) {
-    for (var i in options.attributes) {
+    for (let i in options.attributes) {
       el.setAttribute(i, options.attributes[i]);
     }
   }
@@ -177,9 +177,9 @@ function updateSidebar(icon) {
 function updatePreview() {
   fetch(IconViewer.getSelected().dataset.uri).then(response => {
     return response.text();
-  }).then(data => {
+  }).then(innerHTML => {
     let icon = document.querySelector('#icon-details .preview .icon');
-    icon.innerHTML = data;
+    icon.innerHTML = innerHTML;
 
     let fills = ['context-fill', 'light', 'dark'];
     let selected = document.querySelector("input[name='fill']:checked");
@@ -208,4 +208,3 @@ function updateDownloadUrl() {
   download.setAttribute('download', selectedIcon.dataset.filename);
   download.dataset.path = selectedIcon.dataset.path;
 }
-

html/viewer/js/icon-list.js

@@ -1,9 +1,32 @@
 var IconList = {
-  getAllDirectories: function() {
-    return data;
+  categories: null,
+
+  getAllCategories: function() {
+    if (!self.categories) {
+      let pageUrl = location.href;
+      pageUrl = pageUrl.substring(0, pageUrl.lastIndexOf("/")).replace("viewer", "");
+      let category_index = {};
+      self.categories = [];
+
+      for (let icon of data) {
+        let sizes = Object.keys(icon.source.desktop);
+        sizes.sort((a,b) => a - b)
+        icon.fullURI = pageUrl + icon.source.desktop[sizes[sizes.length - 1]];
+
+        for (let category of icon.categories) {
+          if (category_index[category] == undefined) {
+            category_index[category] = self.categories.length;
+            self.categories.push({name: category, items: []})
+          }
+          let index = category_index[category];
+          self.categories[index].items.push(icon);
+        }
+      }
+    }
+    return self.categories;
   },
-  getFullIconURI: function(icon, dirName) {
-    var pageUrl = location.href;
-    return pageUrl.substring(0, pageUrl.lastIndexOf("/")).replace("viewer", "icons/") + dirName + "/" + icon;
+
+  getFullIconURI: function(icon) {
+    return icon.fullURI;
   }
 };