Add book-* (git repository) icons (#1011)

* Add `book-copy` (`git clone` repo) icon

* Add `book-marked` (`git` repo) icon

* Add `book-template` (`git` template repo) icon

* Add `book-up` (`git push` repo) icon

* Add `book-down` (`git pull` repo) icon

* Add `book-add` (`git add` repo) icon

* Add `book-minus` (`git rm` repo) icon

* Add `book-x` (`git rm` repo) icon

* Add `book-lock` (`git` private repo) icon

* Add `book-key` (`git` private repo) icon

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "cSpell.words": [
+    "devs",
+    "preact",
+    "Preact"
+  ]
+}

categories/text.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Text formatting",
   "icon": "type"
-}
+}

icons/book-copy.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "read",
+    "dictionary",
+    "booklet",
+    "library",
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "clone"
+  ],
+  "categories": [
+    "development",
+    "coding"
+  ]
+}

icons/book-copy.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2,16V4c0-1.1,0.9-2,2-2h11" />
+  <path d="M5,14H4c-1.1,0-2,0.9-2,2s0.9,2,2,2h1" />
+  <path d="M22,18H11c-1.1,0-2,0.9-2,2l0,0" />
+  <path d="M11,6h11v16H11c-1.1,0-2-0.9-2-2V8C9,6.9,9.9,6,11,6z" />
+</svg>

icons/book-down.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "pull"
+  ],
+  "categories": [
+    "development",
+    "coding"
+  ]
+}

icons/book-down.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" />
+  <path d="M12 13V7" />
+  <path d="m9 10 3 3 3-3" />
+</svg>

icons/book-key.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "private"
+  ],
+  "categories": [
+    "development",
+    "coding",
+    "security"
+  ]
+}

icons/book-key.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20,2l-4.5,4.5"/>
+  <path d="M19,3l1,1"/>
+  <circle cx="14" cy="8" r="2"/>
+  <path d="M4,19.5C4,18.1,5.1,17,6.5,17H20" />
+  <path d="M20,8v14H6.5C5.1,22,4,20.9,4,19.5v-15C4,3.1,5.1,2,6.5,2H14" />
+</svg>

icons/book-lock.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "private"
+  ],
+  "categories": [
+    "development",
+    "coding",
+    "security"
+  ]
+}

icons/book-lock.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4,19.5C4,18.1,5.1,17,6.5,17H20" />
+  <path d="M18,6V4c0-1.1-0.9-2-2-2s-2,0.9-2,2v2" />
+  <path d="M20,15v7H6.5C5.1,22,4,20.9,4,19.5v-15C4,3.1,5.1,2,6.5,2H10" />
+  <path d="M13,6h6c0.6,0,1,0.4,1,1v3c0,0.6-0.4,1-1,1h-6c-0.6,0-1-0.4-1-1V7C12,6.4,12.4,6,13,6z" />
+</svg>

icons/book-marked.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "read",
+    "dictionary",
+    "booklet",
+    "library",
+    "code",
+    "version control",
+    "git",
+    "repository"
+  ],
+  "categories": [
+    "development",
+    "coding"
+  ]
+}

icons/book-marked.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="10,2 10,10 13,7 16,10 16,2" />
+  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+</svg>

icons/book-minus.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "remove",
+    "delete"
+  ],
+  "categories": [
+    "development",
+    "coding"
+  ]
+}

icons/book-minus.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="9" y1="10" x2="15" y2="10"/>
+  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+</svg>

icons/book-plus.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "add"
+  ],
+  "categories": [
+    "development",
+    "coding"
+  ]
+}

icons/book-plus.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="12" y1="7" x2="12" y2="13"/>
+  <line x1="9" y1="10" x2="15" y2="10"/>
+  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+</svg>

icons/book-template.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "read",
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "dashed"
+  ],
+  "categories": [
+    "development",
+    "coding"
+  ]
+}

icons/book-template.svg

@@ -0,0 +1,23 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20,22h-2" />
+  <path d="M20,15v2l-2,0" />
+  <path d="M4,19.5V15" />
+  <path d="M20,8v3" />
+  <path d="M18,2h2v2" />
+  <path d="M4,11V9" />
+  <path d="M12,2h2" />
+  <path d="M12,22h2" />
+  <path d="M12,17h2" />
+  <path d="M8,22H6.5C5.1,22,4,20.9,4,19.5S5.1,17,6.5,17H8" />
+  <path d="M4,5V4.5C4,3.1,5.1,2,6.5,2H8" />
+</svg>

icons/book-up.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "push"
+  ],
+  "categories": [
+    "development",
+    "coding"
+  ]
+}

icons/book-up.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" />
+  <path d="M12,13V7" />
+  <path d="M9,10l3-3l3,3" />
+</svg>

icons/book-x.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "remove",
+    "delete"
+  ],
+  "categories": [
+    "development",
+    "coding"
+  ]
+}

icons/book-x.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9.5,7l5,5" />
+  <path d="M14.5,7l-5,5" />
+  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+</svg>

icons/case-lower.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "text",
+    "letters",
+    "characters",
+    "font",
+    "typography"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/case-lower.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="17" cy="12" r="3" />
+  <line x1="14" x2="14" y1="7" y2="15" />
+  <circle cx="7" cy="12" r="3" />
+  <line x1="10" x2="10" y1="9" y2="15" />
+</svg>

icons/case-sensitive.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "text",
+    "letters",
+    "characters",
+    "font",
+    "typography"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/case-sensitive.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="3,15 7,7 11,15" />
+  <line x1="4" x2="10" y1="13" y2="13" />
+  <circle cx="18" cy="12" r="3" />
+  <line x1="21" x2="21" y1="9" y2="15" />
+</svg>

icons/case-upper.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "text",
+    "letters",
+    "characters",
+    "font",
+    "typography"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/case-upper.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="3,15 7,7 11,15" />
+  <line x1="4" x2="10" y1="13" y2="13" />
+  <path d="M15 7h4c1.1 0 2 .9 2 2s-.9 2-2 2h-4V7z" />
+  <path d="M15 11h4.5c1.1 0 2 .9 2 2s-.9 2-2 2H15v-4z" />
+</svg>

icons/castle.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "fortress",
+    "stronghold",
+    "palace",
+    "chateau",
+    "building"
+  ],
+  "categories": [
+    "buildings",
+    "gaming",
+    "maps"
+  ]
+}

icons/castle.svg

@@ -0,0 +1,21 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M22 20v-9H2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2Z" />
+  <path d="M18 11V4H6v7" />
+  <path d="M15 22v-4a3 3 0 0 0-3-3v0a3 3 0 0 0-3 3v4" />
+  <path d="M22 11V9" />
+  <path d="M2 11V9" />
+  <path d="M6 4V2" />
+  <path d="M18 4V2" />
+  <path d="M10 4V2" />
+  <path d="M14 4V2" />
+</svg>

icons/chevron-right-square.json

@@ -5,7 +5,8 @@
     "command line",
     "terminal",
     "prompt",
-    "shell"
+    "shell",
+    "console"
   ],
   "categories": [
     "coding",

icons/church.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "temple",
+    "building"
+  ],
+  "categories": [
+    "buildings",
+    "maps"
+  ]
+}

icons/church.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m18 7 4 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9l4-2" />
+  <path d="M14 22v-4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v4" />
+  <path d="M18 22V5l-6-3-6 3v17" />
+  <path d="M12 7v5" />
+  <path d="M10 9h4" />
+</svg>

icons/clipboard-paste.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "copy",
+    "paste"
+  ],
+  "categories": [
+    "text",
+    "arrows"
+  ]
+}

icons/clipboard-paste.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M15 2H9a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h6c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1Z" />
+  <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2M16 4h2a2 2 0 0 1 2 2v2M11 14h10" />
+  <path d="m17 10 4 4-4 4" />
+</svg>

icons/history.json

@@ -6,7 +6,9 @@
     "undo",
     "rewind",
     "timeline",
-    "version"
+    "version",
+    "time machine",
+    "backup"
   ],
   "categories": [
     "arrows",

icons/hotel.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "building",
+    "hostel",
+    "motel",
+    "inn"
+  ],
+  "categories": [
+    "buildings",
+    "maps",
+    "travel"
+  ]
+}

icons/hotel.svg

@@ -0,0 +1,21 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z" />
+  <path d="m9 16 .348-.24c1.465-1.013 3.84-1.013 5.304 0L15 16" />
+  <path d="M8 7h.01" />
+  <path d="M16 7h.01" />
+  <path d="M12 7h.01" />
+  <path d="M12 11h.01" />
+  <path d="M16 11h.01" />
+  <path d="M8 11h.01" />
+  <path d="M10 22v-6.5m4 0V22" />
+</svg>

icons/microwave.json

@@ -7,6 +7,7 @@
     "bake"
   ],
   "categories": [
-    "food-beverage"
+    "food-beverage",
+    "home"
   ]
-}
+}

icons/orbit.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "planet",
+    "space",
+    "physics"
+  ],
+  "categories": [
+    "science"
+  ]
+}

icons/orbit.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="3" />
+  <circle cx="18" cy="6" r="2" />
+  <circle cx="6" cy="18" r="2" />
+  <path d="M18.8,7.8c0.2,0.3,0.4,0.7,0.5,1.1c0.4,1,0.6,2,0.6,3.1s-0.2,2.2-0.6,3.1c-0.4,1-1,1.8-1.7,2.5 s-1.6,1.3-2.5,1.7c-1,0.4-2,0.6-3.1,0.6" />
+  <path d="M5.2,16.2c-0.2-0.3-0.4-0.7-0.5-1.1c-0.4-1-0.6-2-0.6-3.1s0.2-2.2,0.6-3.1c0.4-1,1-1.8,1.7-2.5S7.9,5,8.9,4.6 c1-0.4,2-0.6,3.1-0.6" />
+</svg>

icons/power.json

@@ -4,7 +4,9 @@
     "on",
     "off",
     "device",
-    "switch"
+    "switch",
+    "reboot",
+    "restart"
   ],
   "categories": [
     "connectivity"

icons/rat.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "animal",
+    "mouse",
+    "mice",
+    "rodent",
+    "pet",
+    "pest",
+    "plague"
+  ],
+  "categories": [
+    "animals"
+  ]
+}

icons/rat.svg

@@ -0,0 +1,18 @@
+<svg 
+    width="24" 
+    height="24" 
+    viewBox="0 0 24 24" 
+    version="1.1" 
+    xmlns="http://www.w3.org/2000/svg"  
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+>    
+  <path d="M14 16.5v-.77a2.73 2.73 0 0 1 3.27-2.68l3.02.6a1.4 1.4 0 0 0 1.5-2.08l-1.63-2.8a3 3 0 1 0-3.35-4.82" />
+  <path d="M16 9h-.01" />
+  <path d="M17 5.12V5a3 3 0 1 0-5.24 2h-1A6.77 6.77 0 0 0 4 13.77C4 16.1 5.9 18 8.23 18H9" />
+  <path d="M13 22H4a2 2 0 1 1 0-4h12" />
+  <path d="M13.67 18c.21-.44.33-.94.33-1.45A3.65 3.65 0 0 0 10.26 13" />
+</svg>

icons/replace-all.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "search",
+    "substitute",
+    "swap",
+    "change"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/replace-all.svg

@@ -0,0 +1,21 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6,10V5c0-1.7,1.3-3,3-3h1" />
+  <polyline points="3,7 6,10 9,7" />
+  <path d="M22,8c0,1.1-0.9,2-2,2" />
+  <path d="M20,2c1.1,0,2,0.9,2,2" />
+  <path d="M14,4c0-1.1,0.9-2,2-2" />
+  <path d="M16,10c-1.1,0-2-0.9-2-2" />
+  <path d="M8,22H4c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C10,21.1,9.1,22,8,22z" />
+  <path d="M14,14c1.1,0,2,0.9,2,2v4c0,1.1-0.9,2-2,2" />
+  <path d="M20,14c1.1,0,2,0.9,2,2v4c0,1.1-0.9,2-2,2" />
+</svg>

icons/replace.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "search",
+    "substitute",
+    "swap",
+    "change"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/replace.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6,10V5c0-1.7,1.3-3,3-3h1" />
+  <polyline points="3,7 6,10 9,7" />
+  <path d="M22,8c0,1.1-0.9,2-2,2" />
+  <path d="M20,2c1.1,0,2,0.9,2,2" />
+  <path d="M14,4c0-1.1,0.9-2,2-2" />
+  <path d="M16,10c-1.1,0-2-0.9-2-2" />
+  <path d="M8,22H4c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C10,21.1,9.1,22,8,22z" />
+</svg>

icons/rotate-ccw.json

@@ -2,7 +2,12 @@
   "$schema": "../icon.schema.json",
   "tags": [
     "arrow",
-    "left"
+    "left",
+    "counter-clockwise",
+    "restart",
+    "reload",
+    "backup",
+    "undo"
   ],
   "categories": [
     "arrows",

icons/rotate-cw.json

@@ -2,7 +2,11 @@
   "$schema": "../icon.schema.json",
   "tags": [
     "arrow",
-    "right"
+    "right",
+    "clockwise",
+    "refresh",
+    "reload",
+    "redo"
   ],
   "categories": [
     "arrows",

icons/school-2.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "building",
+    "education",
+    "childhood",
+    "university"
+  ],
+  "categories": [
+    "buildings",
+    "maps"
+  ]
+}

icons/school-2.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="10" r="1" />
+  <path d="M22 20V8h-4l-6-4-6 4H2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2Z" />
+  <path d="M6 17v.01" />
+  <path d="M6 13v.01" />
+  <path d="M18 17v.01" />
+  <path d="M18 13v.01" />
+  <path d="M14 22v-5a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v5" />
+</svg>

icons/school.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "building",
+    "education",
+    "childhood",
+    "university"
+  ],
+  "categories": [
+    "buildings",
+    "maps"
+  ]
+}

icons/school.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m4 6 8-4 8 4" />
+  <path d="m18 10 4 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8l4-2" />
+  <path d="M14 22v-4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v4" />
+  <path d="M18 5v17" />
+  <path d="M6 5v17" />
+  <circle cx="12" cy="9" r="2" />
+</svg>

icons/space.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "text",
+    "selection",
+    "letters",
+    "characters",
+    "font",
+    "typography"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/space.svg

@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="22,17 22,19 2,19 2,17" />
+</svg>

icons/step-back.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "previous",
+    "music",
+    "left",
+    "reverse"
+  ],
+  "categories": [
+    "multimedia",
+    "arrows"
+  ]
+}

icons/step-back.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="18" x2="18" y1="20" y2="4" />
+  <polygon points="14,20 4,12 14,4" />
+</svg>

icons/step-forward.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "next",
+    "music",
+    "right",
+    "continue"
+  ],
+  "categories": [
+    "multimedia",
+    "arrows"
+  ]
+}

icons/step-forward.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="6" x2="6" y1="4" y2="20" />
+  <polygon points="10,4 20,12 10,20" />
+</svg>

icons/store.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "shop",
+    "supermarket",
+    "stand",
+    "boutique",
+    "building"
+  ],
+  "categories": [
+    "buildings",
+    "maps"
+  ]
+}

icons/store.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/>
+  <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
+  <path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/>
+  <path d="M2 7h20"/>
+  <path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7"/>
+</svg>

icons/text-selection.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "find",
+    "search"
+  ],
+  "categories": [
+    "text",
+    "cursors"
+  ]
+}

icons/text-selection.svg

@@ -0,0 +1,27 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M5 3a2 2 0 0 0-2 2" />
+  <path d="M19 3a2 2 0 0 1 2 2" />
+  <path d="M21 19a2 2 0 0 1-2 2" />
+  <path d="M5 21a2 2 0 0 1-2-2" />
+  <path d="M9 3h1" />
+  <path d="M9 21h1" />
+  <path d="M14 3h1" />
+  <path d="M14 21h1" />
+  <path d="M3 9v1" />
+  <path d="M21 9v1" />
+  <path d="M3 14v1" />
+  <path d="M21 14v1" />
+  <line x1="7" x2="15" y1="8" y2="8" />
+  <line x1="7" x2="17" y1="12" y2="12" />
+  <line x1="7" x2="13" y1="16" y2="16" />
+</svg>

icons/text.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "find",
+    "search",
+    "data",
+    "txt",
+    "pdf",
+    "document"
+  ],
+  "categories": [
+    "text",
+    "files",
+    "cursors"
+  ]
+}

icons/text.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M17 6.1H3" />
+  <path d="M21 12.1H3" />
+  <path d="M15.1 18H3" />
+</svg>

icons/warehouse.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "storage",
+    "logistics",
+    "building"
+  ],
+  "categories": [
+    "buildings",
+    "maps"
+  ]
+}

icons/warehouse.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z" />
+  <path d="M6 18h12" />
+  <path d="M6 14h12" />
+  <rect width="12" height="12" x="6" y="10" />
+</svg>

icons/whole-word.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "text",
+    "selection",
+    "letters",
+    "characters",
+    "font",
+    "typography"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/whole-word.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="17" cy="12" r="3" />
+  <line x1="14" x2="14" y1="7" y2="15" />
+  <circle cx="7" cy="12" r="3" />
+  <line x1="10" x2="10" y1="9" y2="15" />
+  <polyline points="22,17 22,19 2,19 2,17" />
+</svg>

packages/lucide-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-angular",
   "description": "A Lucide icon library package for Angular applications",
-  "version": "0.133.0",
+  "version": "0.141.0",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",

packages/lucide-flutter/pubspec.yaml

@@ -1,6 +1,6 @@
 name: lucide_icons
 description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
-version: 0.133.0
+version: 0.141.0
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide
 

packages/lucide-preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-preact",
   "description": "A Lucide icon library package for Preact applications",
-  "version": "0.133.0",
+  "version": "0.141.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-react-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react-native",
   "description": "A Lucide icon library package for React Native applications",
-  "version": "0.133.0",
+  "version": "0.141.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react",
   "description": "A Lucide icon library package for React applications",
-  "version": "0.133.0",
+  "version": "0.141.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-react/src/createLucideIcon.ts

@@ -1,7 +1,7 @@
 import { forwardRef, createElement, ReactSVG, SVGProps } from 'react';
 import defaultAttributes from './defaultAttributes';
 
-type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
+export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
 
 export type SVGAttributes = Partial<SVGProps<SVGSVGElement>>
 

packages/lucide-svelte/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-svelte",
   "description": "A Lucide icon library package for Svelte applications",
-  "version": "0.133.0",
+  "version": "0.141.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-vue-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue-next",
-  "version": "0.133.0",
+  "version": "0.141.0",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",

packages/lucide-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue",
-  "version": "0.133.0",
+  "version": "0.141.0",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 2 applications",
   "license": "ISC",

packages/lucide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide",
   "description": "A Lucide icon library package for web and javascript applications.",
-  "version": "0.133.0",
+  "version": "0.141.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

site/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:@next/next/recommended',
+    'plugin:react-hooks/recommended'
   ],
   parserOptions: {
     tsconfigRootDir: __dirname,

site/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "next dev",
     "copy-assets": "mkdir -p ./public/docs/images && cp -rf ../docs/images ./public/docs",
-    "prebuild": "ts-node --swc scripts/preBuild.ts",
+    "prebuild": "ts-node --swc scripts/preBuild.ts && pnpm -w lucide-react build",
     "build": "pnpm copy-assets && pnpm prebuild && next build",
     "export": "next export -o build",
     "deploy": "pnpm build && pnpm export",
@@ -24,16 +24,17 @@
     "@next/mdx": "^11.0.0",
     "@svgr/webpack": "^6.3.1",
     "downloadjs": "^1.4.7",
+    "framer-motion": "^6.2.8",
     "element-to-path": "^1.2.1",
-    "framer-motion": "^4",
     "fuse.js": "^6.5.3",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "jszip": "^3.7.0",
     "lodash": "^4.17.20",
-    "lucide-react": "^0.94.0",
+    "lucide-react": "workspace:*",
     "next": "12",
     "next-mdx-remote": "^3.0.2",
+    "object-path": "0.11.5",
     "prism-react-renderer": "^1.2.1",
     "react": "17.0.2",
     "react-color": "^2.19.3",
@@ -59,6 +60,7 @@
     "babel-loader": "^8.1.0",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^26.5.2",
     "node-fetch": "2",
     "prettier": "^2.3.2",

site/src/assets/styling.css

@@ -17,3 +17,7 @@ body {
   min-height: 100%;
   padding-bottom: 80px;
 }
+
+html:has(*:target) {
+  scroll-behavior: smooth;
+}

site/src/components/CategoryChangesBar.tsx

@@ -0,0 +1,123 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Divider,
+} from '@chakra-ui/react';
+import theme from '../lib/theme';
+import { useMemo, useState } from 'react';
+import CodeBlock from './CodeBlock';
+import CopyButton from './CopyButton';
+import { IconEntity } from 'src/types';
+
+const CategoryChangesBar = ({ categories, changes }) => {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [showCode, setShowCode] = useState(false);
+  const handleSubmit = () => {
+    setModalOpen(true);
+  };
+
+  const openPullRequestUrl = 'https://github.com/lucide-icons/lucide/edit/master/categories.json';
+
+  const onClose = () => {
+    setModalOpen(false);
+  };
+
+  const newMappedCategories = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(categories).map(([category, icons]) => [
+        category,
+        (icons as IconEntity[]).map(({ name }) => name),
+      ]),
+    );
+  }, [categories]);
+
+  const categoryCode = useMemo(() => JSON.stringify(newMappedCategories, null, '  '), [
+    newMappedCategories,
+  ]);
+
+  return (
+    <>
+      <Box
+        borderWidth="1px"
+        rounded="lg"
+        width="full"
+        boxShadow={theme.shadows.xl}
+        position="relative"
+        padding={4}
+        maxW="960px"
+        margin="0 auto"
+      >
+        <Flex alignItems="center" justifyContent="space-between">
+          <Text fontSize="lg">You're editing the overview categories.</Text>
+          <Flex>
+            <Text fontSize="lg" fontWeight="bold" marginLeft={4}>
+              {changes}
+            </Text>
+            <Text fontSize="lg" marginLeft={2}>
+              changes made to 'categories.json'
+            </Text>
+          </Flex>
+          <Button onClick={handleSubmit} colorScheme="red" variant="solid">
+            Submit Pull-request
+          </Button>
+        </Flex>
+      </Box>
+      <Modal isOpen={modalOpen} onClose={onClose} size="xl">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Nice changes!</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text>To submit those changes, follow these steps:</Text>
+            <Text fontWeight="bold" mt={4}>
+              Step 1:
+            </Text>
+            <Text mt={2} mb={2}>
+              Copy all the code,
+            </Text>
+
+            <CopyButton copyText={categoryCode} buttonText="Copy code" mr={4} />
+            <Text fontWeight="bold" mt={6}>
+              Step 2:
+            </Text>
+            <Text mt={2} mb={4}>
+              Open Pull-request, select-all and paste the code with the changes.
+            </Text>
+            <Button as="a" variant="solid" href={openPullRequestUrl} target="__blank">
+              Open pull-request
+            </Button>
+            <Divider mt={8} mb={4} />
+            <Text fontWeight="bold" mt={6} mb={4}>
+              Code:
+            </Text>
+            <Button as="a" variant="solid" onClick={() => setShowCode(show => !show)}>
+              Show code
+            </Button>
+            {showCode && (
+              <Box maxHeight={320} overflow="auto" background="gray.800">
+                <CodeBlock code={categoryCode} language="json" showLines />
+              </Box>
+            )}
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Done
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default CategoryChangesBar;

site/src/components/CodeBlock.tsx

@@ -2,7 +2,6 @@ import { Box, BoxProps, chakra, useColorMode } from '@chakra-ui/react';
 import nightOwlLightTheme from 'prism-react-renderer/themes/nightOwlLight';
 import nightOwlDarkTheme from 'prism-react-renderer/themes/nightOwl';
 import uiTheme from '../lib/theme';
-// import theme from 'prism-react-renderer/themes/nightOwl';
 import BaseHighlight, { defaultProps, Language } from 'prism-react-renderer';
 import { CSSProperties } from 'react';
 import CopyButton from './CopyButton';
@@ -49,7 +48,7 @@ function CodeBlock({ code, language, metastring, showLines, ...props }: Highligh
   const { colorMode } = useColorMode();
 
   const backgroundColor =
-    colorMode === 'light' ? uiTheme.colors.gray[100] : uiTheme.colors.gray[700];
+    colorMode === 'light' ? uiTheme.colors.gray[100] : uiTheme.colors.gray[900];
   const codeTheme = colorMode === 'light' ? nightOwlLightTheme : nightOwlDarkTheme;
 
   const customizedCodeTheme = {
@@ -63,6 +62,8 @@ function CodeBlock({ code, language, metastring, showLines, ...props }: Highligh
   return (
     <Box position="relative" zIndex="0" {...props}>
       <CodeContainer bg={backgroundColor}>
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore */}
         <BaseHighlight
           {...defaultProps}
           code={code}

site/src/components/CopyButton.tsx

@@ -4,7 +4,7 @@ const CopyButton = ({ copyText, buttonText = 'copy', ...props }) => {
   const { hasCopied, onCopy } = useClipboard(copyText);
 
   return (
-    <Button onClick={onCopy} {...props}>
+    <Button onClick={onCopy} {...props} variant="solid">
       {hasCopied ? 'copied' : buttonText}
     </Button>
   );

site/src/components/CustomizeIconContext.tsx

@@ -59,10 +59,21 @@ export function CustomizeIconContext({ children }): JSX.Element {
   return <IconStyleContext.Provider value={value}>{children}</IconStyleContext.Provider>;
 }
 
-export function useCustomizeIconContext(): ICustomIconStyle {
+export function useCustomizeIconContext() {
   const context = useContext(IconStyleContext);
   if (context === undefined) {
-    throw new Error('useCustomizeIconContext must be used within a IconStyleContextProvider');
+    return {
+      color: 'currentColor',
+      size: 24,
+      strokeWidth: 2,
+      iconsRef: { current: {} },
+      /* eslint-disable @typescript-eslint/no-empty-function */
+      setStroke: function() {},
+      setColor: function() {},
+      setSize: function() {},
+      resetStyle: function() {},
+      /* eslint-enable @typescript-eslint/no-empty-function */
+    };
   }
   return context;
 }

site/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Link, WrapItem, Text, Wrap, Heading } from '@chakra-ui/react';
+import { Button, Flex, Link, WrapItem, Text, Wrap, Heading, Box } from '@chakra-ui/react';
 import download from 'downloadjs';
 import { Download, Github } from 'lucide-react';
 import NextLink from 'next/link';
@@ -11,25 +11,10 @@ import PreactLogo from '../../public/framework-logos/preact.svg';
 import AngularLogo from '../../public/framework-logos/angular.svg';
 import FlutterLogo from '../../public/framework-logos/flutter.svg';
 import SvelteLogo from '../../public/framework-logos/svelte.svg';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useCustomizeIconContext } from './CustomizeIconContext';
 import { IconEntity } from '../types';
-
-type IconContent = [icon: string, src:string];
-
-async function generateZip(icons: IconContent[]) {
-  const JSZip = (await import('jszip')).default
-
-  const zip = new JSZip();
-
-  const addingZipPromises = icons.map(([name, src]) =>
-    zip.file(`${name}.svg`, src),
-  );
-
-  await Promise.all(addingZipPromises)
-
-  return zip.generateAsync({ type: 'blob' });
-}
+import generateZip, { IconContent } from 'src/lib/generateZip';
 
 interface HeaderProps {
   data: IconEntity[];
@@ -37,25 +22,27 @@ interface HeaderProps {
 
 const Header = ({ data }: HeaderProps) => {
   const [zippingIcons, setZippingIcons] = useState(false);
-  const { iconsRef } = useCustomizeIconContext();
+  const { iconsRef, strokeWidth, color, size } = useCustomizeIconContext();
 
-  const downloadAllIcons = async () => {
+  const downloadAllIcons = useCallback(async () => {
     setZippingIcons(true);
 
-    let iconEntries: IconContent[] = Object.entries(iconsRef.current).map(([name, svgEl]) => [
+    let iconEntries: IconContent[] = Object.entries(iconsRef.current)
+      .map(([name, svgEl]) => [
       name,
       svgEl.outerHTML,
     ]);
 
     // Fallback
     if (iconEntries.length === 0) {
-      iconEntries = data.map(icon => [icon.name, icon.src]);
+      const getFallbackZip = (await import('../lib/getFallbackZip')).default
+      iconEntries = getFallbackZip(data, { strokeWidth, color, size })
     }
 
     const zip = await generateZip(iconEntries);
     download(zip, 'lucide.zip');
     setZippingIcons(false);
-  };
+  }, []);
 
   const repositoryUrl = 'https://github.com/lucide-icons/lucide';
 
@@ -117,83 +104,85 @@ const Header = ({ data }: HeaderProps) => {
   ];
 
   return (
-    <Flex direction="column" align="center" justify="center">
-      <Heading as="h1" fontSize="4xl" mb="4" textAlign="center">
-        Beautiful &amp; consistent icon toolkit made by the community.
-      </Heading>
-      <Text fontSize="lg" as="p" textAlign="center" mb="1">
-        Open-source project and a fork of{' '}
-        <Link href="https://github.com/feathericons/feather" isExternal>
-          Feather Icons
-        </Link>
-        . <br />
-        We're expanding the icon set as much as possible while keeping it nice-looking -{' '}
-        <Link href={repositoryUrl} isExternal>
-          join us
-        </Link>
-        !
-      </Text>
-      <Wrap
-        marginTop={4}
-        marginBottom={6}
-        spacing={{ base: 4, lg: 6 }}
-        justify="center"
-        align="center"
-      >
-        <WrapItem flexBasis="100%" style={{ marginBottom: 0 }}>
-          <NextLink href="/packages" passHref>
-            <Link _hover={{ opacity: 0.8 }} marginX="auto">
-              <Text fontSize="md" opacity={0.5} as="p" textAlign="center" width="100%">
-                Available for:
-              </Text>
-            </Link>
-          </NextLink>
-        </WrapItem>
-        {packages.map(({ name, href, Logo, label }) => (
-          <WrapItem key={name}>
-            <NextLink href={href} key={name} passHref>
-              <Link _hover={{ opacity: 0.8 }} aria-label={label} title={label}>
-                <Logo />
+    <Box maxW="1250px" mx="auto">
+      <Flex direction="column" align="center" justify="center" py={12}>
+        <Heading as="h1" fontSize="4xl" mb="4" textAlign="center">
+          Beautiful &amp; consistent icon toolkit made by the community.
+        </Heading>
+        <Text fontSize="lg" as="p" textAlign="center" mb="1">
+          Open-source project and a fork of{' '}
+          <Link href="https://github.com/feathericons/feather" isExternal>
+            Feather Icons
+          </Link>
+          . <br />
+          We're expanding the icon set as much as possible while keeping it nice-looking -{' '}
+          <Link href={repositoryUrl} isExternal>
+            join us
+          </Link>
+          !
+        </Text>
+        <Wrap
+          marginTop={4}
+          marginBottom={6}
+          spacing={{ base: 4, lg: 6 }}
+          justify="center"
+          align="center"
+        >
+          <WrapItem flexBasis="100%" style={{ marginBottom: 0 }}>
+            <NextLink href="/packages" passHref>
+              <Link _hover={{ opacity: 0.8 }} marginX="auto">
+                <Text fontSize="md" opacity={0.5} as="p" textAlign="center" width="100%">
+                  Available for:
+                </Text>
               </Link>
             </NextLink>
           </WrapItem>
-        ))}
-        <WrapItem>
-          <NextLink href="/packages" passHref>
-            <Link _hover={{ opacity: 0.8 }} marginX="auto">
-              <Text fontSize="md" opacity={0.5}>More options</Text>
-            </Link>
-          </NextLink>
-        </WrapItem>
-      </Wrap>
-      <Wrap marginTop={3} marginBottom={12} spacing="15px" justify="center">
-        <WrapItem>
-          <Button
-            leftIcon={<Download />}
-            size="lg"
-            onClick={downloadAllIcons}
-            isLoading={zippingIcons}
-            loadingText="Creating zip.."
-          >
-            Download all
-          </Button>
-        </WrapItem>
-        <WrapItem>
-          <IconCustomizerDrawer />
-        </WrapItem>
-        <WrapItem>
-          <Button
-            as="a"
-            leftIcon={<Github />}
-            size="lg"
-            href={repositoryUrl}
-            target="__blank"
-          >
-            Github
-          </Button>
-        </WrapItem>
-      </Wrap>
-    </Flex>
+          {packages.map(({ name, href, Logo, label }) => (
+            <WrapItem key={name}>
+              <NextLink href={href} key={name} passHref>
+                <Link _hover={{ opacity: 0.8 }} aria-label={label}>
+                  <Logo />
+                </Link>
+              </NextLink>
+            </WrapItem>
+          ))}
+          <WrapItem>
+            <NextLink href="/packages" passHref>
+              <Link _hover={{ opacity: 0.8 }} marginX="auto">
+                <Text fontSize="md" opacity={0.5}>More options</Text>
+              </Link>
+            </NextLink>
+          </WrapItem>
+        </Wrap>
+        <Wrap marginTop={3} marginBottom={12} spacing="15px" justify="center">
+          <WrapItem>
+            <Button
+              leftIcon={<Download />}
+              size="lg"
+              onClick={downloadAllIcons}
+              isLoading={zippingIcons}
+              loadingText="Creating zip.."
+            >
+              Download all
+            </Button>
+          </WrapItem>
+          <WrapItem>
+            <IconCustomizerDrawer />
+          </WrapItem>
+          <WrapItem>
+            <Button
+              as="a"
+              leftIcon={<Github />}
+              size="lg"
+              href={repositoryUrl}
+              target="__blank"
+            >
+              Github
+            </Button>
+          </WrapItem>
+        </Wrap>
+      </Flex>
+    </Box>
   );
 };
 

site/src/components/IconCategory.tsx

@@ -0,0 +1,45 @@
+import { Box, Text, useColorModeValue, BoxProps } from '@chakra-ui/react';
+import { forwardRef } from 'react';
+import theme from '../lib/theme';
+
+interface IconCategoryProps extends BoxProps {
+  active?: boolean;
+  name: string;
+  dragging: boolean;
+}
+
+const IconCategory = forwardRef<HTMLDivElement, IconCategoryProps>(
+  ({ name, active = false, dragging, children, ...props }: IconCategoryProps, ref) => {
+    const activeBackground = useColorModeValue(theme.colors.gray, theme.colors.gray[700]);
+    const toTitleCase = string =>
+      string
+        .split(' ')
+        .map(word => word[0].toUpperCase() + word.slice(1))
+        .join(' ');
+
+    return (
+      <Box
+        backgroundColor={active ? activeBackground : 'transparent'}
+        borderRadius={8}
+        ref={ref}
+        pointerEvents="all"
+        padding={4}
+        marginBottom={3}
+        transition="background 120ms ease-in"
+        _hover={{
+          background: dragging && activeBackground,
+        }}
+        {...props}
+      >
+        <Box>
+          <Text fontSize="xl" marginBottom={3}>
+            {toTitleCase(name)}
+          </Text>
+          {children}
+        </Box>
+      </Box>
+    );
+  },
+);
+
+export default IconCategory;

site/src/components/IconCategoryDrawer.tsx

@@ -0,0 +1,168 @@
+import { Box, BoxProps, Button, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, useBreakpointValue, useTheme, useColorModeValue } from "@chakra-ui/react"
+import { motion } from "framer-motion"
+import { Fragment, useMemo } from "react"
+import {Category, IconEntity} from "src/types"
+import {createLucideIcon} from "lucide-react";
+
+const ListWrapper = ({ children, ...restProps }: BoxProps) => {
+  return (
+    <Box
+      w="full"
+      h="full"
+      overflowY="auto"
+      sx={{
+        direction: 'rtl',
+        '&::-webkit-scrollbar' : {
+          width: '4px',
+        },
+        '&::-webkit-scrollbar-track' : {
+          background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb' : {
+          bgColor: useColorModeValue('var(--chakra-colors-gray-300)', 'var(--chakra-colors-whiteAlpha-300)'),
+          borderRadius: 0,
+        },
+      }}
+      {...restProps}
+    >
+      <Box
+        whiteSpace="nowrap"
+        height="100%"
+        display="flex"
+        flexDirection="column"
+        paddingBottom={8}
+        paddingX={2}
+        paddingY={1}
+        paddingRight={4}
+        sx={{
+          direction: 'ltr'
+        }}
+      >
+        { children }
+      </Box>
+    </Box>
+  )
+}
+
+const CATEGORY_TOP_OFFSET = 100
+
+interface IconCategoryDrawerProps {
+  data: IconEntity[];
+  categories: Category[]
+  setCategoryView: (view: boolean) => void
+  open: boolean
+  onClose: () => void
+}
+
+const IconCategoryDrawer = ({ open, onClose, categories, data, setCategoryView }: IconCategoryDrawerProps) => {
+  const theme = useTheme()
+
+  const useCustomDrawer = useBreakpointValue({ base: false, md: true });
+
+  const sidebarVariants = {
+    closed: {
+      width: 0,
+    },
+    open: {
+      width: theme.sizes['xs']
+    }
+  }
+
+  const categoryList = useMemo(() => {
+    return (
+      <>
+        {[{ name: 'all', title: 'All', icon: null, iconCount: data.length }, ...categories].map(({ title, name, icon, iconCount }) => {
+          // Show category icon?
+          const iconData = data.find(({ name: iconName }) => iconName === icon)
+          const Icon = iconData ? createLucideIcon(iconData.name, iconData.iconNode) : null
+
+          return (
+            <Fragment key={name}>
+              <Button
+                as="a"
+                colorScheme='gray'
+                variant='ghost'
+                width="100%"
+                justifyContent="space-between"
+                leftIcon={Icon ? <Icon /> : null}
+                onClick={(event) => {
+                  event.stopPropagation()
+
+                  if (!useCustomDrawer) {
+                    onClose()
+
+                    const [routePath] = window.location.href.split('#')
+
+                    setTimeout(() =>{
+                      window.location.href = `${routePath}#${name}`
+                    },150)
+                  }
+
+                  setCategoryView(name !== 'all')
+                }}
+                href={useCustomDrawer ? `#${name}` : undefined}
+                marginBottom={1}
+                sx={{
+                  opacity: .7,
+                  flexShrink: 0,
+                  '&.active': {
+                    color: 'brand.500'
+                  }
+                }}
+              >
+                <Box width='100%'>{title}</Box>
+                <Box sx={{opacity: .5}}><small>{iconCount}</small></Box>
+              </Button>
+              {name === 'all' && (
+                <Divider marginY={2} />
+              )}
+            </Fragment>
+          )
+        })}
+        <Box h={8} flexShrink={0}></Box>
+      </>
+    )
+  }, [categories, useCustomDrawer])
+
+  if(useCustomDrawer) {
+    return (
+      <motion.div
+        variants={sidebarVariants}
+        animate={(open ?? useCustomDrawer) ? 'open' : 'closed'}
+        initial={false}
+        style={{
+          height: `calc(100vh - ${CATEGORY_TOP_OFFSET}px)`,
+          position: 'sticky',
+          top: '100px'
+        }}
+      >
+        <ListWrapper>
+          {categoryList}
+        </ListWrapper>
+      </motion.div>
+    )
+}
+
+return (
+  <Drawer
+    placement="left"
+    onClose={onClose}
+    isOpen={open}
+    size="sm"
+    blockScrollOnMount={false}
+  >
+    <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton marginTop={3.5} marginRight={3} />
+        <DrawerHeader />
+        <DrawerBody>
+          <ListWrapper>
+            {categoryList}
+          </ListWrapper>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default IconCategoryDrawer

site/src/components/IconCategoryList.tsx

@@ -0,0 +1,78 @@
+import { Box, BoxProps, Stack, Text, useColorModeValue } from '@chakra-ui/react';
+import { useMemo } from 'react';
+import { Category, IconEntity } from 'src/types';
+import theme from '../lib/theme';
+import IconList from './IconList';
+
+interface IconCategoryProps {
+  icons: IconEntity[]
+  data: IconEntity[]
+  categories: Category[]
+  categoryProps?: {
+    innerProps: BoxProps,
+    activeCategory: string | null
+  }
+}
+
+const IconCategory = ({
+  icons,
+  data,
+  categories = [],
+  categoryProps = {
+    innerProps: {},
+    activeCategory: null,
+  },
+}: IconCategoryProps) => {
+  const { innerProps, activeCategory, ...outerProps } = categoryProps;
+  const activeBackground = useColorModeValue(theme.colors.gray, theme.colors.gray[700]);
+
+  const iconCategories = useMemo(
+    () =>
+      categories.reduce((categoryMap, { name, title }) => {
+        const categoryIcons = data.filter(({categories}) => categories.includes(name))
+
+        const isSearching = icons.length !== data.length;
+        const searchResults = isSearching
+          ? categoryIcons.filter(icon => icons.some((item) => item?.name === icon?.name))
+          : categoryIcons;
+
+        categoryMap.push({
+          title,
+          name,
+          icons: searchResults,
+          isActive: name === activeCategory,
+        });
+
+        return categoryMap;
+      }, []),
+    [icons, categories, activeCategory],
+  );
+
+  return (
+    <Stack spacing={4}>
+      {iconCategories
+        .filter(({ icons }) => icons.length)
+        .map(({ name, title, icons, isActive }) => (
+          <Box
+            key={name}
+            backgroundColor={isActive ? activeBackground : 'transparent'}
+            borderRadius={8}
+            {...outerProps}
+          >
+            <Box {...innerProps || {}}>
+              <Text fontSize="xl" marginBottom={3} id={name} sx={{
+                '&:target': {
+                  scrollMarginTop: 20
+                }
+              }}>
+                {title}
+              </Text>
+              <IconList icons={icons} category={name}/>
+            </Box>
+          </Box>
+        ))}
+    </Stack>
+  );
+};
+
+export default IconCategory;

site/src/components/IconCustomizerDrawer.tsx

@@ -1,5 +1,5 @@
-import { useContext, useState } from 'react';
-import { IconStyleContext } from './CustomizeIconContext';
+import { useState } from 'react';
+import { useCustomizeIconContext } from './CustomizeIconContext';
 import { Edit } from 'lucide-react';
 import {
   Button,
@@ -8,30 +8,56 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerHeader,
-  DrawerOverlay,
   FormControl,
   FormLabel,
   Grid,
+  Hide,
+  IconButton,
+  Show,
   Slider,
   SliderFilledTrack,
   SliderThumb,
   SliderTrack,
   Flex,
   Text,
+  ButtonProps,
 } from '@chakra-ui/react';
 import ColorPicker from './ColorPicker';
 
-export function IconCustomizerDrawer() {
+export const IconCustomizerDrawer = (props: ButtonProps) => {
   const [showCustomize, setShowCustomize] = useState(false);
-  const { color, setColor, size, setSize, strokeWidth, setStroke, resetStyle } = useContext(IconStyleContext);
+  const {
+    color,
+    setColor,
+    size,
+    setSize,
+    strokeWidth,
+    setStroke,
+    resetStyle,
+  } = useCustomizeIconContext();
 
   return (
     <>
-      <Button as="a" leftIcon={<Edit />} size="lg" onClick={() => setShowCustomize(true)}>
-        Customize
-      </Button>
-      <Drawer isOpen={showCustomize} placement="right" onClose={() => setShowCustomize(false)}>
-        <DrawerOverlay />
+      <Hide below='md'>
+        <Button
+          as="a"
+          leftIcon={<Edit />}
+          size="lg"
+          onClick={() => setShowCustomize(true)}
+          {...props}
+        >Customize</Button>
+      </Hide>
+      <Show below='md'>
+        <IconButton
+          aria-label='Customize'
+          variant="solid"
+          color="current"
+          onClick={() => setShowCustomize(true)}
+          icon={<Edit />}
+          {...props}
+        ></IconButton>
+      </Show>
+      <Drawer isOpen={showCustomize} placement="right" onClose={() => setShowCustomize(false)} size="md">
         <DrawerContent>
           <DrawerCloseButton />
           <DrawerHeader>Customize Icons</DrawerHeader>
@@ -42,7 +68,7 @@ export function IconCustomizerDrawer() {
                 <ColorPicker
                   color={color}
                   value={color}
-                  onChangeComplete={(col) => setColor(col.hex)}
+                  onChangeComplete={col => setColor(col.hex)}
                 />
               </FormControl>
               <FormControl>
@@ -93,4 +119,4 @@ export function IconCustomizerDrawer() {
       </Drawer>
     </>
   );
-}
+};

site/src/components/IconDetailOverlay.tsx

@@ -2,11 +2,11 @@ import { Box, Text, IconButton, useColorMode, Flex, Slide, ButtonGroup, Button,
 import theme from "../lib/theme";
 import download from 'downloadjs';
 import { X as Close } from 'lucide-react';
-import {useContext, useEffect, useRef} from "react";
-import {IconStyleContext} from "./CustomizeIconContext";
-import {IconWrapper} from "./IconWrapper";
+import { useEffect, useRef } from "react";
+import {useCustomizeIconContext} from "./CustomizeIconContext";
 import ModifiedTooltip from "./ModifiedTooltip";
 import { IconEntity } from "../types";
+import { createLucideIcon } from 'lucide-react';
 
 type IconDownload = {
   src: string;
@@ -14,15 +14,17 @@ type IconDownload = {
 };
 
 interface IconDetailOverlayProps {
-  open: boolean
-  close: () => void
+  open?: boolean
+  close?: () => void
   icon?: IconEntity
 }
 
 const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps) => {
   const toast = useToast();
   const { colorMode } = useColorMode();
-  const {color, strokeWidth, size} = useContext(IconStyleContext);
+
+  const { tags = [], name, iconNode } = icon ?? {};
+  const {color, strokeWidth, size} = useCustomizeIconContext();
   const iconRef = useRef<SVGSVGElement>(null);
   const [isMobile] = useMediaQuery("(max-width: 560px)")
   const { isOpen, onOpen, onClose } = useDisclosure()
@@ -37,8 +39,6 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
     return null
   }
 
-  const { tags = [], name = '' } = icon;
-
   const handleClose = () => {
     onClose();
     close();
@@ -54,10 +54,12 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
     color: color,
   };
 
-  const downloadIcon = ({src, name = ''} : IconDownload) => download(src, `${name}.svg`, 'image/svg+xml');
+  const Icon = createLucideIcon(name, iconNode)
 
-  const copyIcon = async ({src, name} : IconDownload) => {
-    const trimmedSrc = src.replace(/(\r\n|\n|\r|\s\s)/gm, "")
+  const downloadIcon = ({name = ''} : IconDownload) => download(iconRef.current.outerHTML, `${name}.svg`, 'image/svg+xml');
+
+  const copyIcon = async ({name} : IconDownload) => {
+    const trimmedSrc = iconRef.current.outerHTML.replace(/(\r\n|\n|\r|\s\s)/gm, "")
 
     await navigator.clipboard.writeText(trimmedSrc)
 
@@ -70,14 +72,14 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
     });
   }
 
-  const downloadPNG = ({src, name}: IconDownload) => {
+  const downloadPNG = ({name}: IconDownload) => {
     const canvas = document.createElement('canvas');
     canvas.width = size;
     canvas.height = size;
     const ctx = canvas.getContext("2d");
 
     const image = new Image();
-    image.src = `data:image/svg+xml;base64,${btoa(src)}`;
+    image.src = `data:image/svg+xml;base64,${btoa(iconRef.current.outerHTML)}`;
     image.onload = function() {
       ctx.drawImage(image, 0, 0);
 
@@ -98,7 +100,7 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
       height={0}
       key={name}
     >
-      <Slide direction="bottom" in={isOpen} style={{ zIndex: 10 }}>
+      <Slide direction="bottom" in={isOpen} style={{ zIndex: 10, pointerEvents: 'none' }}>
       <Flex
         alignItems="center"
         justifyContent="space-between"
@@ -120,6 +122,7 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
                 ? theme.colors.white
                 : theme.colors.gray[700]
             }
+            style={{ pointerEvents: 'initial' }}
             padding={8}
           >
             <IconButton
@@ -151,14 +154,13 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
                     style={iconStyling}
                     className="icon-large"
                   >
-                    <IconWrapper
-                      src={icon.src}
+                    <Icon
                       stroke={color}
                       strokeWidth={strokeWidth}
-                      height={size}
-                      width={size}
+                      size={size}
                       ref={iconRef}
                     />
+
                   </div>
 
                   <svg className="icon-grid" width="24" height="24" viewBox={`0 0 ${size} ${size}`} fill="none" stroke={colorMode == "light" ? '#E2E8F0' : theme.colors.gray[600]} strokeWidth="0.1" xmlns="http://www.w3.org/2000/svg">

site/src/components/IconList.tsx

@@ -1,35 +1,19 @@
 import { Grid } from '@chakra-ui/react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { memo } from 'react';
 import IconListItem from './IconListItem';
 import { IconEntity } from '../types';
 
 interface IconListProps {
   icons: IconEntity[];
+  category?: string
 }
 
-const IconList = memo(({ icons }: IconListProps) => {
-  const router = useRouter();
-
+const IconList = memo(({ icons, category = '' }: IconListProps) => {
   return (
-    <Grid templateColumns={`repeat(auto-fill, minmax(150px, 1fr))`} gap={5} marginBottom="320px">
+    <Grid templateColumns={`repeat(auto-fill, minmax(80px, 1fr))`} gap={5} marginBottom={6} justifyItems={'center'}>
       {icons.map(icon => {
         return (
-          <Link
-            key={icon.name}
-            scroll={false}
-            shallow={true}
-            href={{
-              pathname: '/icon/[iconName]',
-              query: {
-                ...router.query,
-                iconName: icon.name,
-              },
-            }}
-          >
-            <IconListItem {...icon} />
-          </Link>
+          <IconListItem {...icon} key={`${category}-${icon.name}`}/>
         );
       })}
     </Grid>

site/src/components/IconListItem.tsx

@@ -1,21 +1,25 @@
-import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
+import { Button, ButtonProps, Tooltip, useToast } from '@chakra-ui/react';
 import download from 'downloadjs';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
+import { createLucideIcon, IconNode } from 'lucide-react';
 import { useCustomizeIconContext } from './CustomizeIconContext';
-import { IconWrapper } from './IconWrapper';
+import { useRouter } from 'next/router';
 
-interface IconListItemProps {
+interface IconListItemProps extends ButtonProps {
   name: string;
-  onClick?: ButtonProps['onClick']
-  src: string;
+  iconNode: IconNode;
 }
 
-const IconListItem = ({ name, onClick, src: svg }: IconListItemProps) => {
+const IconListItem = ({ name, iconNode }: IconListItemProps) => {
+  const router = useRouter()
   const toast = useToast();
   const { color, size, strokeWidth, iconsRef } = useCustomizeIconContext();
 
-  const handleClick:ButtonProps['onClick'] = async (event) => {
-    const src = (iconsRef.current[name].outerHTML ?? svg).replace(/(\r\n|\n|\r|(>\s\s<))/gm, "")
+  const Icon = createLucideIcon(name, iconNode)
+
+  const handleClick:ButtonProps['onClick'] = useCallback(async (event) => {
+    const src = (iconsRef.current[name].outerHTML).replace(/(\r\n|\n|\r|(>\s\s<))/gm, "")
+
     if (event.shiftKey) {
       await navigator.clipboard.writeText(src)
 
@@ -25,46 +29,53 @@ const IconListItem = ({ name, onClick, src: svg }: IconListItemProps) => {
         status: 'success',
         duration: 1500,
       });
+      return
     }
     if (event.altKey) {
       download(src, `${name}.svg`, 'image/svg+xml');
+      return
     }
-    if (onClick) {
-      onClick(event);
-    }
-  }
+
+    router.push({
+      pathname: `/icon/${name}`,
+      query: (
+        router.query?.search != null
+        ? { search: router.query.search }
+        : {}
+      ),
+    },
+    undefined,
+    {
+      shallow: true,
+      scroll: false
+    })
+  }, [iconsRef, name, router, toast])
+
 
   return (
-    <Button
-      variant="ghost"
-      borderWidth="1px"
-      rounded="lg"
-      padding={2}
-      height={32}
-      position="relative"
-      whiteSpace="normal"
-      onClick={handleClick}
-      key={name}
-      alignItems="center"
-    >
-      <Flex direction="column" align="center" justify="stretch" width="100%" gap={4}>
-        <Flex flex={2} flexBasis="100%" minHeight={10} align="flex-end">
-          <IconWrapper
-            src={svg}
-            stroke={color}
-            strokeWidth={strokeWidth}
-            height={size}
-            width={size}
-            ref={iconEl => (iconsRef.current[name] = iconEl)}
-          />
-        </Flex>
-        <Flex flex={1} minHeight={10} align="center">
-          <Text wordBreak="break-word" maxWidth="100%">
-            {name}
-          </Text>
-        </Flex>
-      </Flex>
-    </Button>
+    <Tooltip label={name}>
+      <Button
+        as="a"
+        variant="ghost"
+        borderWidth="1px"
+        rounded="lg"
+        padding={2}
+        height={20}
+        width={20}
+        position="relative"
+        whiteSpace="normal"
+        alignItems="center"
+        sx={{cursor: 'pointer'}}
+        onClick={handleClick}
+      >
+        <Icon
+          ref={iconEl => (iconsRef.current[name] = iconEl)}
+          size={size}
+          stroke={color}
+          strokeWidth={strokeWidth}
+        />
+      </Button>
+    </Tooltip>
   );
 };
 

site/src/components/IconOverview.tsx

@@ -1,16 +1,38 @@
-import { Box, Text } from '@chakra-ui/react';
-import React, { useState } from 'react';
+import { Box, Text, IconButton, HStack } from '@chakra-ui/react';
+import React, { memo, useEffect, useState } from 'react';
 import useSearch from '../lib/useSearch';
 import IconList from './IconList';
 import { SearchInput } from './SearchInput';
-import { IconEntity } from '../types';
+import { Category, IconEntity } from '../types';
+
+import { SidebarClose, SidebarOpen } from 'lucide-react';
+
+import IconCategoryList from './IconCategoryList';
+import { IconCustomizerDrawer } from './IconCustomizerDrawer';
+import IconCategoryDrawer from './IconCategoryDrawer';
 
 interface IconOverviewProps {
   data: IconEntity[];
+  categories: Category[]
 }
 
-const IconOverview = ({ data }: IconOverviewProps) => {
+const IconOverview = ({ data, categories }: IconOverviewProps): JSX.Element => {
   const [query, setQuery] = useState('');
+  const [sidebarOpen, setSidebarOpen] = useState<boolean | undefined>();
+  const [categoryView, setCategoryView] = useState(false);
+
+  useEffect(() => {
+    if(
+      typeof window !== 'undefined' &&
+      window.location.href.split('#').length === 2
+    ) {
+      const [,hash] = window.location.href.split('#')
+
+      setCategoryView(categories.some(({ name }) => name === hash))
+    }
+  }, [])
+
+  const SidebarIcon = sidebarOpen ? SidebarOpen : SidebarClose;
 
   const searchResults = useSearch(query, data, [
     { name: 'name', weight: 2 },
@@ -18,20 +40,49 @@ const IconOverview = ({ data }: IconOverviewProps) => {
   ]);
 
   return (
-    <>
-      <SearchInput onChange={setQuery} count={data.length} />
+    <Box>
+      <HStack position="sticky" top={0} zIndex={1} gap={2} padding={5}>
+        <IconButton
+          aria-label="Close overlay"
+          variant="solid"
+          color="current"
+          onClick={() => setSidebarOpen(currentView => {
+            if(currentView == null) {
+              return false
+            }
 
-      <Box marginTop={5}>
-        {searchResults.length > 0 ? (
-          <IconList icons={searchResults} />
-        ) : (
-          <Text fontSize="2xl" fontWeight="bold" textAlign="center" wordBreak="break-word">
-            No results found for "{query}"
-          </Text>
-        )}
-      </Box>
-    </>
+            return !currentView
+          })}
+          icon={<SidebarIcon />}
+        />
+        <SearchInput onChange={setQuery} count={data.length} />
+        <IconCustomizerDrawer size="md" paddingX={6} />
+      </HStack>
+
+      <HStack marginBottom="320px" padding={5} alignItems="flex-start">
+        <IconCategoryDrawer
+          open={sidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+          categories={categories}
+          data={data}
+          setCategoryView={setCategoryView}
+        />
+        <Box flex={1} paddingTop={1}>
+          {searchResults.length > 0 ? (
+            categoryView ? (
+              <IconCategoryList icons={searchResults} data={data} categories={categories} />
+            ) : (
+              <IconList icons={searchResults} />
+            )
+          ) : (
+            <Text fontSize="2xl" fontWeight="bold" textAlign="center" wordBreak="break-word">
+              No results found for "{query}"
+            </Text>
+          )}
+        </Box>
+      </HStack>
+    </Box>
   );
 };
 
-export default IconOverview;
+export default memo(IconOverview)

site/src/components/IconReorder.tsx

@@ -0,0 +1,66 @@
+import { Box, BoxProps } from '@chakra-ui/react';
+import { AnimatePresence, Reorder } from 'framer-motion';
+import { memo, RefObject } from 'react';
+import { IconEntity } from '../types';
+import IconReorderItem from './IconReorderItem';
+
+interface IconListProps {
+  icons: IconEntity[];
+  setIcons: (icons) => void;
+  dropZones?: RefObject<[string, HTMLDivElement][]>;
+  onDrop?: (name: string, category: string) => void;
+  dragging: boolean;
+  setDragging: (dragging) => void;
+  sx?: BoxProps['sx'];
+}
+
+const IconReorder = ({
+  icons,
+  setIcons,
+  dropZones,
+  onDrop,
+  dragging,
+  setDragging,
+  sx,
+}: IconListProps) => {
+  return (
+    <Box
+      as={Reorder.Group}
+      display="flex"
+      flexWrap="wrap"
+      gap={5}
+      marginBottom={6}
+      onReorder={setIcons}
+      layoutScroll
+      values={icons.map(({ name }) => name)}
+      sx={{
+        '.dragging': {
+          position: 'absolute',
+        },
+        ...sx,
+      }}
+    >
+      <AnimatePresence>
+        {icons.map(icon => {
+          return (
+            <IconReorderItem
+              icon={icon}
+              key={icon.name}
+              dropZones={dropZones}
+              onDrop={onDrop}
+              dragging={dragging}
+              setDragging={setDragging}
+            />
+          );
+        })}
+      </AnimatePresence>
+    </Box>
+  );
+};
+
+export default memo(IconReorder, (prevProps, nextProps) => {
+  const prevIconsNames = prevProps.icons.map(({ name }) => name);
+  const nextIconsNames = nextProps.icons.map(({ name }) => name);
+
+  return JSON.stringify(prevIconsNames) === JSON.stringify(nextIconsNames);
+});

site/src/components/IconReorderItem.tsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { useMotionValue, Reorder } from 'framer-motion';
+import useRaisedShadow from '../hooks/useRaisedShadow';
+import IconListItem from './IconListItem';
+import { IconEntity } from '../types';
+import { RefObject } from 'react';
+
+interface Props {
+  icon: IconEntity
+  dropZones?: RefObject<[string, HTMLDivElement][]>
+  onDrop?: (name:string, category: string) => void
+  dragging: boolean;
+  setDragging: (dragging) => void;
+}
+
+const IconReorderItem = ({ icon, dropZones, onDrop, setDragging }: Props): JSX.Element => {
+  const y = useMotionValue(0);
+  const boxShadow = useRaisedShadow(y);
+  const [dragItem, setDragItem] = useState(false);
+
+  const onDragEnd = (event) => {
+    setDragItem(false)
+    setDragging(false);
+
+    const dropZone = dropZones.current?.find(([, el]) => {
+      if (!Array.isArray(event?.path)) {
+        return false
+      }
+
+      return Array.from(event.path).includes(el)
+    })
+
+    if (dropZone?.[0] && onDrop) {
+      const category = dropZone?.[0]
+      console.log(icon.name, category);
+
+      onDrop(icon.name, category)
+    }
+  };
+
+  const onDrag = () => {
+    setDragItem(true)
+    setDragging(true);
+  };
+
+  return (
+    <Reorder.Item
+      value={icon.name}
+      style={{
+        boxShadow, y,
+        listStyle: 'none',
+        pointerEvents: dragItem ? 'none' : 'all',
+        cursor: dragItem ? 'grab': 'pointer',
+      }}
+      drag
+      dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }}
+      dragElastic={1}
+      onDragEnd={onDragEnd}
+      onDrag={onDrag}
+      initial={{
+        opacity: 0,
+        scale: 0,
+      }}
+      animate={{
+        opacity: 1,
+        scale: 1,
+        transition: {
+          duration: 0.2,
+          delay: 0.02,
+        },
+      }}
+    >
+      <IconListItem {...icon} />
+    </Reorder.Item>
+  );
+};
+
+export default IconReorderItem;