Refine heart-* icons (#1017)

Co-authored-by: Karsa <contact@karsa.org>

.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/atom.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "atomic",
+    "nuclear",
+    "physics",
+    "particle",
+    "element",
+    "molecule"
+  ],
+  "categories": [
+    "science"
+  ]
+}

icons/atom.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"
+>
+  <circle cx="12" cy="12" r="1" />
+  <path d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z" />
+  <path d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z" />
+</svg>

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/heart-crack.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z" />
-  <path d="m12 13-1-1 2-2-3-2.5 2.77-2.92" />
+  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+  <path d="m12 13-1-1 2-2-3-3 2-2" />
 </svg>

icons/heart-handshake.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z" />
-  <path d="M12 5.36 8.87 8.5a2.13 2.13 0 0 0 0 3h0a2.13 2.13 0 0 0 3 0l2.26-2.21a3 3 0 0 1 4.22 0l2.4 2.4" />
+  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+  <path d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08v0c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66" />
   <path d="m18 15-2-2" />
   <path d="m15 18-2-2" />
 </svg>

icons/heart-off.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4.12 4.107a5.4 5.4 0 0 0-.538.473C1.46 6.7 1.33 10.28 4 13l8 8 4.5-4.5" />
-  <path d="M19.328 13.672 20 13c2.67-2.72 2.54-6.3.42-8.42a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-2.386-1.393" />
-  <line x1="2" x2="22" y1="2" y2="22" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+  <path d="M16.5 16.5 12 21l-7-7c-1.5-1.45-3-3.2-3-5.5a5.5 5.5 0 0 1 2.14-4.35" />
+  <path d="M8.76 3.1c1.15.22 2.13.78 3.24 1.9 1.5-1.5 2.74-2 4.5-2A5.5 5.5 0 0 1 22 8.5c0 2.12-1.3 3.78-2.67 5.17" />
 </svg>

icons/heart-pulse.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z" />
-  <path d="M3.5 12h6l.5-1 2 4.5 2-7 1.5 3.5h5" />
+  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+  <path d="M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27" />
 </svg>

icons/heart.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z" />
+  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
 </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-cursor-input.svg

@@ -9,8 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M13 20h-1a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1" />
-  <path d="M5 4h1a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5" />
-  <path d="M13.1 7.9h6.8A2.18 2.18 0 0 1 22 10v4a2.11 2.11 0 0 1-2.1 2.1h-6.8" />
-  <path d="M4.8 16.1h-.7A2.18 2.18 0 0 1 2 14v-4a2.18 2.18 0 0 1 2.1-2.1h.7" />
+  <path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"/>
+  <path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"/>
+  <path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/>
+  <path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/>
+  <path d="M9 7v10"/>
 </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.132.0",
+  "version": "0.142.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.132.0
+version: 0.142.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.132.0",
+  "version": "0.142.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.132.0",
+  "version": "0.142.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.132.0",
+  "version": "0.142.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.132.0",
+  "version": "0.142.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.132.0",
+  "version": "0.142.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.132.0",
+  "version": "0.142.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.132.0",
+  "version": "0.142.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