Added the icons/train.svg file added the relevant tags in tags.json (#639 )

Added venetian-mask (#631 )
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633 * added newline to end of file * Updated icon to comply with design guidelines and more closely match accessibleicon.org * Added venetian-mask Co-authored-by: Karsa <karsa@karsa.org>
2025-12-17 07:37:42 +01:00 · 2022-05-18 15:36:18 +02:00 · 2022-05-18 15:35:44 +02:00 · 2022-05-18 15:35:11 +02:00 · 2022-05-18 15:33:24 +02:00 · 2022-05-16 12:44:02 +02:00
39 changed files with 463 additions and 71 deletions
--- a/icons/bar-chart-3.svg
+++ b/icons/bar-chart-3.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 2v20h20" />
+  <path d="M17 18V9" />
+  <path d="M12 18V4" />
+  <path d="M7 18v-4" />
+</svg>
--- a/icons/bar-chart-4.svg
+++ b/icons/bar-chart-4.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 2v20h20" />
+  <path d="M12 18V9" />
+  <path d="M17 18V4" />
+  <path d="M7 18v-4" />
+</svg>
--- a/icons/bar-chart-horizontal.svg
+++ b/icons/bar-chart-horizontal.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 2V22H22" />
+  <path d="M6 17L15 17" />
+  <path d="M6 12L20 12" />
+  <path d="M6 7L10 7" />
+</svg>
--- a/icons/battery-charging.svg
+++ b/icons/battery-charging.svg
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M14 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-3" />
-  <path d="M7 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" />
-  <polyline points="11 7 8 12 12 12 9 17" />
+  <path d="M15 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2" />
+  <path d="M6 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1" />
+  <path d="m11 7-3 5h4l-3 5" />
  <line x1="22" x2="22" y1="11" y2="13" />
 </svg>
--- a/icons/battery-full.svg
+++ b/icons/battery-full.svg
@@ -11,7 +11,7 @@
 >
  <rect x="2" y="7" width="16" height="10" rx="2" ry="2" />
  <line x1="22" x2="22" y1="11" y2="13" />
-  <line x1="6" x2="6" y1="10" y2="14" />
-  <line x1="10" x2="10" y1="10" y2="14" />
-  <line x1="14" x2="14" y1="10" y2="14" />
+  <line x1="6" x2="6" y1="11" y2="13" />
+  <line x1="10" x2="10" y1="11" y2="13" />
+  <line x1="14" x2="14" y1="11" y2="13" />
 </svg>
--- a/icons/battery-low.svg
+++ b/icons/battery-low.svg
@@ -11,5 +11,5 @@
 >
  <rect x="2" y="7" width="16" height="10" rx="2" ry="2" />
  <line x1="22" x2="22" y1="11" y2="13" />
-  <line x1="6" x2="6" y1="10" y2="14" />
+  <line x1="6" x2="6" y1="11" y2="13" />
 </svg>
--- a/icons/battery-medium.svg
+++ b/icons/battery-medium.svg
@@ -11,6 +11,6 @@
 >
  <rect x="2" y="7" width="16" height="10" rx="2" ry="2" />
  <line x1="22" x2="22" y1="11" y2="13" />
-  <line x1="6" x2="6" y1="10" y2="14" />
-  <line x1="10" x2="10" y1="10" y2="14" />
+  <line x1="6" x2="6" y1="11" y2="13" />
+  <line x1="10" x2="10" y1="11" y2="13" />
 </svg>
--- a/icons/clapperboard.svg
+++ b/icons/clapperboard.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 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8H4Z" />
+  <path d="m4 11-.88-2.87a2 2 0 0 1 1.33-2.5l11.48-3.5a2 2 0 0 1 2.5 1.32l.87 2.87L4 11.01Z" />
+  <path d="m6.6 4.99 3.38 4.2" />
+  <path d="m11.86 3.38 3.38 4.2" />
+</svg>
--- a/icons/cloud-lightning.svg
+++ b/icons/cloud-lightning.svg
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M17.5 17a4.5 4.5 0 1 0 0-9h-1.8a7 7 0 1 0-10.3 8" />
-  <path d="m12 12-3 5h5l-3 5" />
+  <path d="m13 12-3 5h4l-3 5" />
+  <path d="M18 17a4.5 4.5 0 0 0-.5-9h-1.8a7.05 7.05 0 0 0-2-3.23A7 7 0 1 0 5.32 16a6.42 6.42 0 0 0 .68.37" />
 </svg>
--- a/icons/cpu.svg
+++ b/icons/cpu.svg
@@ -11,12 +11,12 @@
 >
  <rect x="4" y="4" width="16" height="16" rx="2" ry="2" />
  <rect x="9" y="9" width="6" height="6" />
-  <line x1="9" y1="1" x2="9" y2="4" />
-  <line x1="15" y1="1" x2="15" y2="4" />
-  <line x1="9" y1="20" x2="9" y2="23" />
-  <line x1="15" y1="20" x2="15" y2="23" />
-  <line x1="20" y1="9" x2="23" y2="9" />
-  <line x1="20" y1="14" x2="23" y2="14" />
-  <line x1="1" y1="9" x2="4" y2="9" />
-  <line x1="1" y1="14" x2="4" y2="14" />
+  <line x1="9" y1="2" x2="9" y2="4" />
+  <line x1="15" y1="2" x2="15" y2="4" />
+  <line x1="9" y1="21" x2="9" y2="22" />
+  <line x1="15" y1="20" x2="15" y2="22" />
+  <line x1="20" y1="9" x2="22" y2="9" />
+  <line x1="20" y1="14" x2="22" y2="14" />
+  <line x1="2" y1="9" x2="4" y2="9" />
+  <line x1="2" y1="14" x2="4" y2="14" />
 </svg>
--- a/icons/delete.svg
+++ b/icons/delete.svg
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" />
+  <path d="M20 5H9L2 12l7 7H20a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z" />
  <line x1="18" y1="9" x2="12" y2="15" />
  <line x1="12" y1="9" x2="18" y2="15" />
 </svg>
--- a/icons/factory.svg
+++ b/icons/factory.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 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
+  <path d="M17 18h1"  />
+  <path d="M12 18h1"  />
+  <path d="M7 18h1"  />
+</svg>
--- a/icons/focus.svg
+++ b/icons/focus.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" />
+  <path d="M3 7V5a2 2 0 0 1 2-2h2"></path>
+  <path d="M17 3h2a2 2 0 0 1 2 2v2"></path>
+  <path d="M21 17v2a2 2 0 0 1-2 2h-2"></path>
+  <path d="M7 21H5a2 2 0 0 1-2-2v-2"></path>
+</svg>
--- a/icons/inspect.svg
+++ b/icons/inspect.svg
@@ -9,7 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M19 11V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h7" />
-  <path d="m12 12 4.166 10 1.48-4.355L22 16.166 12 12z" />
-  <path d="m18 18 3 3" />
+  <path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6" />
+  <path d="m12 12 4 10 1.7-4.3L22 16Z" />
 </svg>
--- a/icons/line-chart.svg
+++ b/icons/line-chart.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"
+>
+  <path d="M2 2v20h20" />
+  <path d="m20 9-6 6-5-5-3 3" />
+</svg>
--- a/icons/map-pin-off.svg
+++ b/icons/map-pin-off.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="M5.43 5.43A8.06 8.06 0 0 0 4 10c0 6 8 12 8 12a29.94 29.94 0 0 0 5-5"/>
+  <path d="M19.18 13.52A8.66 8.66 0 0 0 20 10a8 8 0 0 0-8-8 7.88 7.88 0 0 0-3.52.82"/>
+  <path d="M9.13 9.13A2.78 2.78 0 0 0 9 10a3 3 0 0 0 3 3 2.78 2.78 0 0 0 .87-.13"/>
+  <path d="M14.9 9.25a3 3 0 0 0-2.15-2.16"/>
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>
--- a/icons/navigation-2-off.svg
+++ b/icons/navigation-2-off.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="M9.31 9.31 5 21l7-4 7 4-1.17-3.17"/>
+  <path d="M14.53 8.88 12 2 10.83 5.17"/>
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>
--- a/icons/navigation-off.svg
+++ b/icons/navigation-off.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="M8.43 8.43 3 11l8 2 2 8 2.57-5.43"/>
+  <path d="M17.39 11.73 22 2 12.27 6.61"/>
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>
--- a/icons/pipette.svg
+++ b/icons/pipette.svg
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="m2 22 2-2h3l7-7" />
-  <path d="M4 20v-3l7-7" />
-  <path d="M14.29 13.3a1 1 0 0 0 1.41 0l.8-.8c.27-.27.27-.72 0-1s-.28-.72 0-1l4.08-4.08a2 2 0 0 0 0-2.83l-.17-.17a2 2 0 0 0-2.83 0L13.5 7.51c-.28.27-.73.27-1 0s-.73-.28-1 0l-.8.79a1 1 0 0 0 0 1.41l3.59 3.59z" />
+  <path d="M2 22l1-1H6l9-9" />
+  <path d="M3 21V18l9-9" />
+  <path d="M21.37 5.63a2.12 2.12 0 0 0-3-3L15.58 5.42a1.05 1.05 0 0 1-1.5 0 1.07 1.07 0 0 0-1.5 0L11.25 6.75a1.07 1.07 0 0 0 0 1.5l4.5 4.5a1.07 1.07 0 0 0 1.5 0l1.33-1.33a1.07 1.07 0 0 0 0-1.5 1.05 1.05 0 0 1 0-1.5Z" />
 </svg>
--- a/icons/puzzle.svg
+++ b/icons/puzzle.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"
+>
+  <path d="m12 2 3.6 3.6c2.4-6.3 9.1.4 2.8 2.8L22 12l-3.6 3.6c-2.4-6.3-9.1.4-2.8 2.8L12 22l-3.6-3.6C6 24.7-.7 18 5.6 15.6L2 12l3.6-3.6C8 14.7 14.7 8 8.4 5.6L12 2z" />
+</svg>
--- a/icons/redo-2.svg
+++ b/icons/redo-2.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"
+>
+  <path d="m15 14 5-5-5-5" />
+  <path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5v0A5.5 5.5 0 0 0 9.5 20H13" />
+</svg>
--- a/icons/shopping-cart.svg
+++ b/icons/shopping-cart.svg
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <circle cx="9" cy="21" r="1" />
+  <circle cx="8" cy="21" r="1" />
  <circle cx="19" cy="21" r="1" />
-  <path d="M2 2H4.5L7.62 14.49A2 2 0 0 0 9.56 16h8.88a2 2 0 0 0 1.94-1.51L22 8H6" />
+  <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" />
 </svg>
--- a/icons/train.svg
+++ b/icons/train.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"
+>
+	<rect x="4" y="3" width="16" height="16" rx="2"/>
+	<path d="M4 11h16M12 3v8"/>
+	<path d="M8 15h.01M16 15h.01M8 19l-2 3M18 22l-2-3"/>
+</svg>
--- a/icons/undo-2.svg
+++ b/icons/undo-2.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"
+>
+  <path d="M9 14 4 9l5-5" />
+  <path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11" />
+</svg>
--- a/icons/venetian-mask.svg
+++ b/icons/venetian-mask.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="M2 12a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V7h-5a8 8 0 0 0-5 2 8 8 0 0 0-5-2H2Z"/>
+  <path d="M6 11c1.5 0 3 .5 3 2-2 0-3 0-3-2Z"/>
+  <path d="M18 11c-1.5 0-3 .5-3 2 2 0 3 0 3-2Z"/>
+</svg>
--- a/icons/vibrate-off.svg
+++ b/icons/vibrate-off.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 8 2 2-2 2 2 2-2 2" />
+  <path d="m22 8-2 2 2 2-2 2 2 2" />
+  <path d="M8 8v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2" />
+  <path d="M16 10.34V6c0-.55-.45-1-1-1h-4.34" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>
--- a/packages/lucide-angular/package.json
+++ b/packages/lucide-angular/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-angular",
  "description": "A Lucide icon library package for Angular applications",
-  "version": "0.34.0",
+  "version": "0.45.0",
  "author": "SMAH1",
  "license": "ISC",
  "homepage": "https://lucide.dev",
--- a/packages/lucide-flutter/pubspec.yaml
+++ b/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.34.0
+version: 0.45.0
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide

--- a/packages/lucide-preact/package.json
+++ b/packages/lucide-preact/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-preact",
  "description": "A Lucide icon library package for Preact applications",
-  "version": "0.34.0",
+  "version": "0.45.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
--- a/packages/lucide-react/package.json
+++ b/packages/lucide-react/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-react",
  "description": "A Lucide icon library package for React applications",
-  "version": "0.34.0",
+  "version": "0.45.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
--- a/packages/lucide-svelte/package.json
+++ b/packages/lucide-svelte/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-svelte",
  "description": "A Lucide icon library package for Svelte applications",
-  "version": "0.34.0",
+  "version": "0.45.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
--- a/packages/lucide-vue-next/package.json
+++ b/packages/lucide-vue-next/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lucide-vue-next",
-  "version": "0.34.0",
+  "version": "0.45.0",
  "author": "Eric Fennis",
  "description": "A Lucide icon library package for Vue 3 applications",
  "license": "ISC",
--- a/packages/lucide-vue/package.json
+++ b/packages/lucide-vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lucide-vue",
-  "version": "0.34.0",
+  "version": "0.45.0",
  "author": "Eric Fennis",
  "description": "A Lucide icon library package for Vue 2 applications",
  "license": "ISC",
--- a/packages/lucide/package.json
+++ b/packages/lucide/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide",
  "description": "A Lucide icon library package for web and javascript applications.",
-  "version": "0.34.0",
+  "version": "0.45.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
--- a/site/src/components/CustomizeIconContext.tsx
+++ b/site/src/components/CustomizeIconContext.tsx
@@ -1,4 +1,6 @@
-import { createContext, useState } from 'react';
+import { createContext, useRef, useState, MutableRefObject, useContext, useMemo } from 'react';
+
+type IconsRef = Record<string, SVGSVGElement>;

 interface ICustomIconStyle {
  color: string;
@@ -8,13 +10,14 @@ interface ICustomIconStyle {
  size: number;
  setSize: (n: number) => void;
  resetStyle: () => void;
+  iconsRef: MutableRefObject<IconsRef>;
 }

 const DEFAULT_STYLE = {
  color: 'currentColor',
  strokeWidth: 2,
  size: 24,
-}
+};

 export const IconStyleContext = createContext<ICustomIconStyle>({
  color: 'currentColor',
@@ -23,25 +26,43 @@ export const IconStyleContext = createContext<ICustomIconStyle>({
  setStroke: (n: number) => null,
  size: 24,
  setSize: (n: number) => null,
-  resetStyle: () => null
+  resetStyle: () => null,
+  iconsRef: { current: {} },
 });

-export function CustomizeIconContext({ children }) {
+export function CustomizeIconContext({ children }): JSX.Element {
+  const iconsRef = useRef<IconsRef>({});
  const [color, setColor] = useState(DEFAULT_STYLE.color);
  const [stroke, setStroke] = useState(DEFAULT_STYLE.strokeWidth);
  const [size, setSize] = useState(DEFAULT_STYLE.size);

-  function resetStyle(){
+  function resetStyle() {
    setColor(DEFAULT_STYLE.color);
    setStroke(DEFAULT_STYLE.strokeWidth);
    setSize(DEFAULT_STYLE.size);
  }

-  return (
-    <IconStyleContext.Provider
-      value={{ color, setColor, strokeWidth: stroke, setStroke, size, setSize, resetStyle }}
-    >
-      {children}
-    </IconStyleContext.Provider>
+  const value = useMemo(
+    () => ({
+      color,
+      setColor,
+      strokeWidth: stroke,
+      setStroke,
+      size,
+      setSize,
+      resetStyle,
+      iconsRef,
+    }),
+    [color, setColor, stroke, setStroke, size, setSize, resetStyle, iconsRef],
  );
+
+  return <IconStyleContext.Provider value={value}>{children}</IconStyleContext.Provider>;
+}
+
+export function useCustomizeIconContext(): ICustomIconStyle {
+  const context = useContext(IconStyleContext);
+  if (context === undefined) {
+    throw new Error('useCustomizeIconContext must be used within a IconStyleContextProvider');
+  }
+  return context;
 }
--- a/site/src/components/Header.tsx
+++ b/site/src/components/Header.tsx
@@ -13,20 +13,49 @@ 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 LaravelLogo from '../../public/framework-logos/laravel.svg';
+import { useState } from 'react';
+import { useCustomizeIconContext } from './CustomizeIconContext';
+import { IconEntity } from '../types';

-function generateZip(icons) {
+type IconContent = [icon: string, src:string]
+
+async function generateZip(icons: IconContent[]) {
  const zip = new JSZip();
-  Object.values(icons).forEach(icon =>
-    // @ts-ignore
-    zip.file(`${icon.name}.svg`, icon.src),
+
+  const addingZipPromises = icons.map(([name, src]) =>
+    zip.file(`${name}.svg`, src),
  );
+
+  await Promise.all(addingZipPromises)
+
  return zip.generateAsync({ type: 'blob' });
 }

-const Header = ({ data }) => {
+interface HeaderProps {
+  data: IconEntity[];
+}
+
+const Header = ({ data }: HeaderProps) => {
+  const [zippingIcons, setZippingIcons] = useState(false);
+  const { iconsRef } = useCustomizeIconContext();
+
  const downloadAllIcons = async () => {
-    const zip = await generateZip(data);
+    console.log(iconsRef);
+    setZippingIcons(true);
+
+    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 zip = await generateZip(iconEntries);
    download(zip, 'lucide.zip');
+    setZippingIcons(false);
  };

  const repositoryUrl = 'https://github.com/lucide-icons/lucide';
@@ -76,7 +105,7 @@ const Header = ({ data }) => {
      name: 'lucide-laravel',
      Logo: LaravelLogo,
      href: 'https://github.com/mallardduck/blade-lucide-icons',
-    }
+    },
  ];

  return (
@@ -124,7 +153,13 @@ const Header = ({ data }) => {
      </Wrap>
      <Wrap marginTop={3} marginBottom={12} spacing="15px" justify="center">
        <WrapItem>
-          <Button leftIcon={<Download />} size="lg" onClick={downloadAllIcons}>
+          <Button
+            leftIcon={<Download />}
+            size="lg"
+            onClick={downloadAllIcons}
+            isLoading={zippingIcons}
+            loadingText="Creating zip.."
+          >
            Download all
          </Button>
        </WrapItem>
--- a/site/src/components/IconListItem.tsx
+++ b/site/src/components/IconListItem.tsx
@@ -1,8 +1,8 @@
-import { Box, Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
+import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
 import download from 'downloadjs';
 import copy from 'copy-to-clipboard';
-import { memo, useContext } from 'react';
-import { IconStyleContext } from './CustomizeIconContext';
+import { memo } from 'react';
+import { useCustomizeIconContext } from './CustomizeIconContext';
 import { IconWrapper } from './IconWrapper';

 interface IconListItemProps {
@@ -13,9 +13,9 @@ interface IconListItemProps {
  onClick?: ButtonProps['onClick'];
 }

-const IconListItem = ({ name, content, src, onClick }: IconListItemProps) => {
+const IconListItem = ({ name, content, onClick, src: svg }: IconListItemProps) => {
  const toast = useToast();
-  const { color, size, strokeWidth } = useContext(IconStyleContext);
+  const { color, size, strokeWidth, iconsRef } = useCustomizeIconContext();

  return (
    <Button
@@ -27,6 +27,7 @@ const IconListItem = ({ name, content, src, onClick }: IconListItemProps) => {
      position="relative"
      whiteSpace="normal"
      onClick={event => {
+        const src = iconsRef.current[name].outerHTML ?? svg
        if (event.shiftKey) {
          copy(src);
          toast({
@@ -54,6 +55,7 @@ const IconListItem = ({ name, content, src, onClick }: IconListItemProps) => {
            strokeWidth={strokeWidth}
            height={size}
            width={size}
+            ref={iconEl => (iconsRef.current[name] = iconEl)}
          />
        </Flex>
        <Flex flex={1} minHeight={10} align="center">
--- a/site/src/pages/icon/[iconName].tsx
+++ b/site/src/pages/icon/[iconName].tsx
@@ -4,7 +4,7 @@ import { getAllData, getData } from '../../lib/icons';
 import IconOverview from '../../components/IconOverview';
 import Layout from '../../components/Layout';
 import Header from '../../components/Header';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';

 const IconPage = ({ icon, data }) => {
  const router = useRouter();
@@ -30,19 +30,15 @@ const IconPage = ({ icon, data }) => {
  };

  const currentIcon = useMemo(() => {
-    if(icon.name === router.query.iconName) {
-      return icon
+    if (icon.name === router.query.iconName) {
+      return icon;
    }
-    return getIcon(router.query.iconName)
-  }, [router.query])
+    return getIcon(router.query.iconName);
+  }, [router.query]);

  return (
    <Layout>
-      <IconDetailOverlay
-        key={currentIcon.name}
-        icon={currentIcon}
-        close={onClose}
-      />
+      <IconDetailOverlay key={currentIcon.name} icon={currentIcon} close={onClose} />
      <Header {...{ data }} />
      <IconOverview {...{ data }} />
    </Layout>
--- a/tags.json
+++ b/tags.json
@@ -317,6 +317,21 @@
    "diagram",
    "graph"
  ],
+  "bar-chart-3": [
+    "statistics",
+    "diagram",
+    "graph"
+  ],
+  "bar-chart-4": [
+    "statistics",
+    "diagram",
+    "graph"
+  ],
+  "bar-chart-horizontal": [
+    "statistics",
+    "diagram",
+    "graph"
+  ],
  "baseline": [
    "text",
    "format",
@@ -604,6 +619,14 @@
    "null",
    "nothing"
  ],
+  "clapperboard": [
+    "movie",
+    "film",
+    "video",
+    "camera",
+    "tv",
+    "television"
+  ],
  "clipboard": [
    "copy",
    "paste"
@@ -873,6 +896,7 @@
    "memory"
  ],
  "delete": [
+    "backspace",
    "remove"
  ],
  "dice-1": [
@@ -1006,6 +1030,14 @@
    "logo",
    "social"
  ],
+  "factory": [
+    "building",
+    "business",
+    "energy",
+    "industry",
+    "manufacture",
+    "sector"
+  ],
  "fast-forward": [
    "music"
  ],
@@ -1128,6 +1160,11 @@
  "flask-round": [
    "beaker"
  ],
+  "focus": [
+    "camera",
+    "lens",
+    "photo"
+  ],
  "folder": [
    "directory"
  ],
@@ -1398,6 +1435,8 @@
    "element",
    "mouse",
    "click",
+    "cursor",
+    "pointer",
    "box"
  ],
  "instagram": [
@@ -1492,6 +1531,11 @@
  "lightbulb-off": [
    "lights"
  ],
+  "line-chart": [
+    "statistics",
+    "diagram",
+    "graph"
+  ],
  "link": [
    "chain",
    "url"
@@ -1599,6 +1643,12 @@
    "travel",
    "marker"
  ],
+  "map-pin-off": [
+    "location",
+    "navigation",
+    "travel",
+    "marker"
+  ],
  "maximize": [
    "fullscreen",
    "expand"
@@ -1763,6 +1813,14 @@
    "location",
    "travel"
  ],
+  "navigation-2-off": [
+    "location",
+    "travel"
+  ],
+  "navigation-off": [
+    "location",
+    "travel"
+  ],
  "network": [
    "tree"
  ],
@@ -1948,6 +2006,12 @@
    "office",
    "device"
  ],
+  "puzzle": [
+    "component",
+    "module",
+    "part",
+    "piece"
+  ],
  "qr-code": [
    "barcode"
  ],
@@ -1966,6 +2030,10 @@
    "undo",
    "history"
  ],
+  "redo-2": [
+    "undo",
+    "history"
+  ],
  "refresh-ccw": [
    "arrows",
    "reload"
@@ -2503,6 +2571,12 @@
    "storm",
    "hurricane"
  ],
+  "train": [
+    "transport",
+    "metro",
+    "subway",
+    "underground"
+  ],
  "trash": [
    "garbage",
    "delete",
@@ -2566,6 +2640,10 @@
    "redo",
    "history"
  ],
+  "undo-2": [
+    "redo",
+    "history"
+  ],
  "unlink": [
    "url",
    "unchain",
@@ -2619,12 +2697,27 @@
    "group",
    "people"
  ],
+  "venetian-mask": [
+    "mask",
+    "masquerade",
+    "impersonate",
+    "secret",
+    "incognito"
+  ],
  "verified": [
    "check"
  ],
  "vibrate": [
    "smartphone",
-    "notification"
+    "notification",
+    "rumble",
+    "haptic feedback"
+  ],
+  "vibrate-off": [
+    "smartphone",
+    "notification",
+    "rumble",
+    "haptic feedback"
  ],
  "video": [
    "camera",
Author	SHA1	Message	Date
delnyn	de27e452e6	Added the icons/train.svg file added the relevant tags in tags.json (#639 )	2022-05-18 15:36:18 +02:00
Karsa	366efe3e82	Added `venetian-mask` (#631 ) * Added accessibility icon as per https://github.com/feathericons/feather/issues/633 * added newline to end of file * Updated icon to comply with design guidelines and more closely match accessibleicon.org * Added venetian-mask Co-authored-by: Karsa <karsa@karsa.org>	2022-05-18 15:35:44 +02:00
Karsa	acaedb41c1	Fixes `inspect` (#575 ) * Added accessibility icon as per https://github.com/feathericons/feather/issues/633 * added newline to end of file * Fixes inspect * Updated icon to comply with design guidelines and more closely match accessibleicon.org * Complete redesign of inspect * Added cursor & pointer tag to inspect Co-authored-by: Karsa <karsa@karsa.org>	2022-05-18 15:35:11 +02:00
Karsa	78d3274b5b	Fixes `battery-charging` & `cloud-lightning` + `battery-` (#568 ) Fixes battery-charging * Fixes spark shape to be more consistent with icon set * Improves 100% of lightning shape + fixes battery icons Co-authored-by: Karsa <karsa@karsa.org>	2022-05-18 15:33:24 +02:00
Karsa	812cdb8f4a	Adds "backspace" to `delete` as a tag (#675 ) * Added accessibility icon as per https://github.com/feathericons/feather/issues/633 * added newline to end of file * Updated icon to comply with design guidelines and more closely match accessibleicon.org * Add backspace to delete as a tag Co-authored-by: Karsa <karsa@karsa.org>	2022-05-16 12:44:02 +02:00
Lucide Bot	0500d18d09	📦 Bump lucide package versions to 0.45.0	2022-05-14 18:53:28 +00:00
Eric Fennis	38c834bcda	Add customize icon in downloadAll (#663 )	2022-05-14 20:43:15 +02:00
Karsa	f3a1bba31d	Added alternate line/bar chart icons (#564 ) * Added alternate line/bar chart icons * Added charts to tags.json * Update bar-chart-3.svg * Update bar-chart-4.svg * Update bar-chart-horizontal.svg * Update line-chart.svg Co-authored-by: Karsa <karsa@karsa.org>	2022-05-14 20:42:27 +02:00
Karsa	ea82684178	Fixes `pipette` (#579 ) * Fixes pipette * Update pipette.svg Co-authored-by: Karsa <karsa@karsa.org>	2022-05-09 17:35:33 +02:00
Karsa	7e3d6a8121	Fixes `shopping-cart` (#653 ) * Added accessibility icon as per https://github.com/feathericons/feather/issues/633 * added newline to end of file * Fixes shopping-cart * Update shopping-cart.svg * Updated icon to comply with design guidelines and more closely match accessibleicon.org * Adds slightly more visual weight to shopping-cart Co-authored-by: Karsa <karsa@karsa.org>	2022-05-09 17:35:05 +02:00
Karsa	2c35468403	Added `map-pin-off`, `navigation-off` & `navigation-off-2` (#647 ) * Added accessibility icon as per https://github.com/feathericons/feather/issues/633 * added newline to end of file * Updated icon to comply with design guidelines and more closely match accessibleicon.org * Added various location-off icons * Renamed navigation-off-2 => navigation-2-off Co-authored-by: Karsa <karsa@karsa.org>	2022-05-09 17:21:16 +02:00
Lennard Scheibel	96aec6562a	Add undo and redo alternative (#643 )	2022-05-09 17:14:24 +02:00
Karsa	aa8b23b12a	Fixes delete (#623 ) Co-authored-by: Karsa <karsa@karsa.org>	2022-05-09 17:12:31 +02:00
Lucide Bot	0d87ec28eb	📦 Bump lucide package versions to 0.42.0	2022-05-09 07:28:59 +00:00
Karsa	f8192b0999	Added factory icon (#558 ) * Added factory icon * slightly adjusted visual style to match lucide * Make factory more in line with other building icons * Slight adjustment to roof height * Even more drastic increase in size. * One more tiny change to roof shape * Added @ericfennis' suggestion Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Karsa <karsa@karsa.org> Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2022-05-09 09:21:13 +02:00
Lucide Bot	ef7b4fe014	📦 Bump lucide package versions to 0.41.0	2022-05-07 15:16:20 +00:00
Karsa	a104a1f206	Fixes `cpu` (#572 ) * Fixes cpu * Update icons/cpu.svg Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * Update icons/cpu.svg Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Karsa <karsa@karsa.org> Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2022-05-07 17:07:44 +02:00
Lucide Bot	6706ade47c	📦 Bump lucide package versions to 0.40.0	2022-05-07 15:03:32 +00:00
Karsa	fcc5dd70ad	Added `focus` (#634 ) * Added accessibility icon as per https://github.com/feathericons/feather/issues/633 * added newline to end of file * Updated icon to comply with design guidelines and more closely match accessibleicon.org * Added focus * Update icon to match scan-line Co-authored-by: Karsa <karsa@karsa.org>	2022-05-07 16:56:25 +02:00
Lucide Bot	c9b9c93034	📦 Bump lucide package versions to 0.39.0	2022-05-06 07:28:43 +00:00
Lennard Scheibel	bd4e464048	Add vibrate-off icon (#641 )	2022-05-06 09:21:44 +02:00
Karsa	ad5b2e5ae2	Added `puzzle` (#633 ) * Added accessibility icon as per https://github.com/feathericons/feather/issues/633 * added newline to end of file * Updated icon to comply with design guidelines and more closely match accessibleicon.org * Added puzzle Co-authored-by: Karsa <karsa@karsa.org>	2022-05-06 09:21:30 +02:00
Bhajneet S.K	794d3c09fb	fix basic linting error (#636 )	2022-05-03 13:01:40 +02:00
it-is-not	202c4c0ae2	Add movie icons (#629 ) * Add movie icon * Add movie-play and movie-pause and fix formatting * change movie and remove movie-play and movie-pause * fix minor issues I introduced later on * move movie icon to nearest pixel * Fix rectangle and change rotation * Change icon name, remove useless tags * svg formatting Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2022-05-03 12:57:39 +02:00
Lucide Bot	6041311718	📦 Bump lucide package versions to 0.37.0	2022-05-02 19:57:37 +00:00