Format code

* Optimise `calendar`[`-*`] icons

* Add `calendar-plus` variant

* Add `calendar-minus` variant

* Add `calendar-slash` icon

* Improve `calendar`[`-*`] icons metadata

* Add `calendar-fold` icon

* Remove calendar-slash

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

docs/package.json

@@ -48,7 +48,7 @@
     "lucide-vue-next": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sandpack-vue3": "^3.1.9",
+    "sandpack-vue3": "3.1.8",
     "semver": "^7.5.2",
     "shikiji": "^0.7.4",
     "simple-git": "^3.18.0",

icons/calendar-check-2.json

@@ -6,10 +6,13 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
+    "month",
+    "year",
     "event",
     "confirm",
     "subscribe",
+    "schedule",
     "done",
     "todo",
     "tick",

icons/calendar-check-2.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M8 2v4" />
+  <path d="M16 2v4" />
   <path d="M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
-  <line x1="16" x2="16" y1="2" y2="6" />
+  <path d="M3 10h18" />
-  <line x1="8" x2="8" y1="2" y2="6" />
-  <line x1="3" x2="21" y1="10" y2="10" />
   <path d="m16 20 2 2 4-4" />
 </svg>

icons/calendar-check.json

@@ -6,7 +6,9 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
+    "month",
+    "year",
     "event",
     "confirm",
     "subscribe",

icons/calendar-check.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+  <path d="M8 2v4" />
-  <line x1="16" x2="16" y1="2" y2="6" />
+  <path d="M16 2v4" />
-  <line x1="8" x2="8" y1="2" y2="6" />
+  <rect width="18" height="18" x="3" y="4" rx="2" />
-  <line x1="3" x2="21" y1="10" y2="10" />
+  <path d="M3 10h18" />
   <path d="m9 16 2 2 4-4" />
 </svg>

icons/calendar-clock.json

@@ -6,9 +6,12 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
+    "month",
+    "year",
     "event",
-    "clock"
+    "clock",
+    "hour"
   ],
   "categories": [
     "time"

icons/calendar-clock.svg

@@ -13,6 +13,6 @@
   <path d="M16 2v4" />
   <path d="M8 2v4" />
   <path d="M3 10h5" />
-  <path d="M17.5 17.5 16 16.25V14" />
+  <path d="M17.5 17.5 16 16.3V14" />
-  <path d="M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z" />
+  <circle cx="16" cy="16" r="6" />
 </svg>

icons/calendar-days.json

@@ -6,7 +6,8 @@
   ],
   "tags": [
     "date",
-    "time",
+    "month",
+    "year",
     "event"
   ],
   "categories": [

icons/calendar-days.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+  <path d="M8 2v4" />
-  <line x1="16" x2="16" y1="2" y2="6" />
+  <path d="M16 2v4" />
-  <line x1="8" x2="8" y1="2" y2="6" />
+  <rect width="18" height="18" x="3" y="4" rx="2" />
-  <line x1="3" x2="21" y1="10" y2="10" />
+  <path d="M3 10h18" />
   <path d="M8 14h.01" />
   <path d="M12 14h.01" />
   <path d="M16 14h.01" />

icons/calendar-fold.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "date",
+    "month",
+    "year",
+    "event",
+    "birthday",
+    "birthdate",
+    "ics"
+  ],
+  "categories": [
+    "time",
+    "files"
+  ]
+}

icons/calendar-fold.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="M8 2v4" />
+  <path d="M16 2v4" />
+  <path d="M21 17V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11Z" />
+  <path d="M3 10h18" />
+  <path d="M15 22v-4a2 2 0 0 1 2-2h4" />
+</svg>

icons/calendar-heart.json

@@ -5,11 +5,13 @@
   ],
   "tags": [
     "date",
-    "time",
+    "month",
+    "year",
     "event",
     "heart",
     "favourite",
-    "subscribe"
+    "subscribe",
+    "valentines day"
   ],
   "categories": [
     "time"

icons/calendar-heart.svg

@@ -9,9 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M21 10V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h7" />
+  <path d="M3 10h18V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7" />
-  <path d="M16 2v4" />
   <path d="M8 2v4" />
-  <path d="M3 10h18" />
+  <path d="M16 2v4" />
   <path d="M21.29 14.7a2.43 2.43 0 0 0-2.65-.52c-.3.12-.57.3-.8.53l-.34.34-.35-.34a2.43 2.43 0 0 0-2.65-.53c-.3.12-.56.3-.79.53-.95.94-1 2.53.2 3.74L17.5 22l3.6-3.55c1.2-1.21 1.14-2.8.19-3.74Z" />
 </svg>

icons/calendar-minus-2.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "date",
+    "day",
+    "month",
+    "year",
+    "event",
+    "delete",
+    "remove"
+  ],
+  "categories": [
+    "time"
+  ]
+}

icons/calendar-minus-2.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="M8 2v4" />
+  <path d="M16 2v4" />
+  <rect width="18" height="18" x="3" y="4" rx="2" />
+  <path d="M3 10h18" />
+  <path d="M10 16h4" />
+</svg>

icons/calendar-minus.json

@@ -6,7 +6,9 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
+    "month",
+    "year",
     "event",
     "delete",
     "remove"

icons/calendar-minus.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M8 2v4" />
+  <path d="M16 2v4" />
   <path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
-  <line x1="16" x2="16" y1="2" y2="6" />
+  <path d="M3 10h18" />
-  <line x1="8" x2="8" y1="2" y2="6" />
+  <path d="M16 19h6" />
-  <line x1="3" x2="21" y1="10" y2="10" />
-  <line x1="16" x2="22" y1="19" y2="19" />
 </svg>

icons/calendar-off.json

@@ -6,7 +6,9 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
+    "month",
+    "year",
     "event",
     "delete",
     "remove"

icons/calendar-off.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4.18 4.18A2 2 0 0 0 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 1.82-1.18" />
+  <path d="M4.2 4.2A2 2 0 0 0 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 1.82-1.18" />
   <path d="M21 15.5V6a2 2 0 0 0-2-2H9.5" />
   <path d="M16 2v4" />
   <path d="M3 10h7" />
   <path d="M21 10h-5.5" />
-  <line x1="2" x2="22" y1="2" y2="22" />
+  <path d="m2 2 20 20" />
 </svg>

icons/calendar-plus-2.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "date",
+    "day",
+    "month",
+    "year",
+    "event",
+    "add",
+    "subscribe",
+    "create",
+    "new"
+  ],
+  "categories": [
+    "time"
+  ]
+}

icons/calendar-plus-2.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="M8 2v4" />
+  <path d="M16 2v4" />
+  <rect width="18" height="18" x="3" y="4" rx="2" />
+  <path d="M3 10h18" />
+  <path d="M10 16h4" />
+  <path d="M12 14v4" />
+</svg>

icons/calendar-plus.json

@@ -6,7 +6,9 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
+    "month",
+    "year",
     "event",
     "add",
     "subscribe",

icons/calendar-plus.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M8 2v4" />
+  <path d="M16 2v4" />
   <path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
-  <line x1="16" x2="16" y1="2" y2="6" />
+  <path d="M3 10h18" />
-  <line x1="8" x2="8" y1="2" y2="6" />
+  <path d="M16 19h6" />
-  <line x1="3" x2="21" y1="10" y2="10" />
+  <path d="M19 16v6" />
-  <line x1="19" x2="19" y1="16" y2="22" />
-  <line x1="16" x2="22" y1="19" y2="19" />
 </svg>

icons/calendar-range.json

@@ -6,7 +6,9 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
+    "month",
+    "year",
     "event",
     "range",
     "period"

icons/calendar-range.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+  <rect width="18" height="18" x="3" y="4" rx="2" />
-  <line x1="16" x2="16" y1="2" y2="6" />
+  <path d="M16 2v4" />
-  <line x1="8" x2="8" y1="2" y2="6" />
+  <path d="M3 10h18" />
-  <line x1="3" x2="21" y1="10" y2="10" />
+  <path d="M8 2v4" />
   <path d="M17 14h-6" />
   <path d="M13 18H7" />
   <path d="M7 14h.01" />

icons/calendar-search.json

@@ -6,9 +6,11 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
-    "search",
+    "month",
-    "events"
+    "year",
+    "events",
+    "search"
   ],
   "categories": [
     "time"

icons/calendar-search.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M21 12V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h7.5" />
+  <path d="M21 12V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.5" />
   <path d="M16 2v4" />
   <path d="M8 2v4" />
   <path d="M3 10h18" />
-  <path d="M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6v0Z" />
+  <circle cx="18" cy="18" r="3" />
   <path d="m22 22-1.5-1.5" />
 </svg>

icons/calendar-x-2.json

@@ -6,7 +6,9 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
+    "month",
+    "year",
     "event",
     "remove"
   ],

icons/calendar-x-2.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M8 2v4" />
+  <path d="M16 2v4" />
   <path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
-  <line x1="16" x2="16" y1="2" y2="6" />
+  <path d="M3 10h18" />
-  <line x1="8" x2="8" y1="2" y2="6" />
+  <path d="m17 22 5-5" />
-  <line x1="3" x2="21" y1="10" y2="10" />
+  <path d="m17 17 5 5" />
-  <line x1="17" x2="22" y1="17" y2="22" />
-  <line x1="17" x2="22" y1="22" y2="17" />
 </svg>

icons/calendar-x.json

@@ -6,7 +6,9 @@
   ],
   "tags": [
     "date",
-    "time",
+    "day",
+    "month",
+    "year",
     "event",
     "remove",
     "busy"

icons/calendar-x.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+  <path d="M8 2v4" />
-  <line x1="16" x2="16" y1="2" y2="6" />
+  <path d="M16 2v4" />
-  <line x1="8" x2="8" y1="2" y2="6" />
+  <rect width="18" height="18" x="3" y="4" rx="2" />
-  <line x1="3" x2="21" y1="10" y2="10" />
+  <path d="M3 10h18" />
-  <line x1="10" x2="14" y1="14" y2="18" />
+  <path d="m14 14-4 4" />
-  <line x1="14" x2="10" y1="14" y2="18" />
+  <path d="m10 14 4 4" />
 </svg>

icons/calendar.json

@@ -6,10 +6,11 @@
   ],
   "tags": [
     "date",
-    "birthdate",
+    "month",
+    "year",
+    "event",
     "birthday",
-    "time",
+    "birthdate"
-    "event"
   ],
   "categories": [
     "time"

icons/calendar.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+  <path d="M8 2v4" />
-  <line x1="16" x2="16" y1="2" y2="6" />
+  <path d="M16 2v4" />
-  <line x1="8" x2="8" y1="2" y2="6" />
+  <rect width="18" height="18" x="3" y="4" rx="2" />
-  <line x1="3" x2="21" y1="10" y2="10" />
+  <path d="M3 10h18" />
 </svg>

icons/ticket-check.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "entry",
+    "pass",
+    "voucher",
+    "event",
+    "concert",
+    "show",
+    "booked",
+    "purchased",
+    "receipt",
+    "redeemed",
+    "validated",
+    "verified",
+    "certified",
+    "checked",
+    "used"
+  ],
+  "categories": [
+    "account",
+    "transportation"
+  ]
+}

icons/ticket-check.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 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
+  <path d="m9 12 2 2 4-4" />
+</svg>

icons/ticket-minus.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "entry",
+    "pass",
+    "voucher",
+    "event",
+    "concert",
+    "show",
+    "remove",
+    "cancel",
+    "unbook",
+    "subtract",
+    "decrease",
+    "-"
+  ],
+  "categories": [
+    "account",
+    "transportation"
+  ]
+}

icons/ticket-minus.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 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
+  <path d="M9 12h6" />
+</svg>

icons/ticket-percent.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "discount",
+    "reduced",
+    "offer",
+    "voucher",
+    "entry",
+    "pass",
+    "event",
+    "concert",
+    "show",
+    "book",
+    "purchase",
+    "%"
+  ],
+  "categories": [
+    "account",
+    "transportation",
+    "shopping"
+  ]
+}

icons/ticket-percent.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 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
+  <path d="M9 9h.01" />
+  <path d="m15 9-6 6" />
+  <path d="M15 15h.01" />
+</svg>

icons/ticket-plus.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "entry",
+    "pass",
+    "voucher",
+    "event",
+    "concert",
+    "show",
+    "book",
+    "purchase",
+    "add",
+    "+"
+  ],
+  "categories": [
+    "account",
+    "transportation"
+  ]
+}

icons/ticket-plus.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 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
+  <path d="M9 12h6" />
+  <path d="M12 9v6" />
+</svg>

icons/ticket-slash.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "entry",
+    "pass",
+    "voucher",
+    "event",
+    "concert",
+    "show",
+    "redeemed",
+    "used",
+    "marked",
+    "checked",
+    "verified",
+    "spoiled",
+    "invalidated",
+    "void",
+    "denied",
+    "refused",
+    "banned",
+    "barred",
+    "forbidden",
+    "prohibited",
+    "cancelled",
+    "cancellation",
+    "refunded",
+    "delete",
+    "remove",
+    "clear",
+    "error"
+  ],
+  "categories": [
+    "account",
+    "transportation"
+  ]
+}

icons/ticket-slash.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 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
+  <path d="m9.5 14.5 5-5" />
+</svg>

icons/ticket-x.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "entry",
+    "pass",
+    "voucher",
+    "event",
+    "concert",
+    "show",
+    "cancelled",
+    "cancellation",
+    "refunded",
+    "used",
+    "void",
+    "invalidated",
+    "spoiled",
+    "denied",
+    "refused",
+    "banned",
+    "barred",
+    "forbidden",
+    "prohibited",
+    "delete",
+    "remove",
+    "clear",
+    "error",
+    "x"
+  ],
+  "categories": [
+    "account",
+    "transportation"
+  ]
+}

icons/ticket-x.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 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
+  <path d="m9.5 14.5 5-5" />
+  <path d="m9.5 9.5 5 5" />
+</svg>

icons/ticket.json

@@ -9,6 +9,9 @@
     "entry",
     "pass",
     "voucher",
+    "event",
+    "concert",
+    "show",
     "perforated",
     "dashed"
   ],

packages/lucide-vue-next/src/createLucideIcon.ts

@@ -4,14 +4,13 @@ import defaultAttributes from './defaultAttributes';
 
 // Create interface extending SVGAttributes
 export interface SVGProps extends Partial<SVGAttributes> {
-  size?: 24 | number
+  size?: 24 | number;
-  strokeWidth?: number | string
+  strokeWidth?: number | string;
-  absoluteStrokeWidth?: boolean
+  absoluteStrokeWidth?: boolean;
 }
 
-
+export type IconNode = [elementName: string, attrs: Record<string, string>][];
-export type IconNode = [elementName: string, attrs: Record<string, string>][]
+export type Icon = FunctionalComponent<SVGProps>;
-export type Icon = FunctionalComponent<SVGProps>
 /**
  * Converts string to KebabCase
  * Copied from scripts/helper. If anyone knows how to properly import it here
@@ -20,29 +19,31 @@ export type Icon = FunctionalComponent<SVGProps>
  * @param {string} string
  * @returns {string} A kebabized string
  */
-export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+export const toKebabCase = (string: string) =>
+  string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
-const createLucideIcon = (iconName: string, iconNode: IconNode): Icon => (
+const createLucideIcon =
-  { size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
+  (iconName: string, iconNode: IconNode): Icon =>
-  { attrs, slots } // context
+  (
+    { size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
+    { attrs, slots }, // context
   ) => {
-  return h(
+    return h(
-    'svg',
+      'svg',
-    {
+      {
-      ...defaultAttributes,
+        ...defaultAttributes,
-      width: size || defaultAttributes.width,
+        width: size || defaultAttributes.width,
-      height: size || defaultAttributes.height,
+        height: size || defaultAttributes.height,
-      stroke: color || defaultAttributes.stroke,
+        stroke: color || defaultAttributes.stroke,
-      'stroke-width': absoluteStrokeWidth ?  Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        'stroke-width': absoluteStrokeWidth
-      ...attrs,
+          ? (Number(strokeWidth) * 24) / Number(size)
-      class: ['lucide', `lucide-${toKebabCase(iconName)}`],
+          : strokeWidth,
-      ...props,
+        ...attrs,
-    },
+        class: ['lucide', `lucide-${toKebabCase(iconName)}`],
-    [
+        ...props,
-      ...iconNode.map(child => h(...child)),
+      },
-      ...(slots.default ? [slots.default()] : [])
+      [...iconNode.map((child) => h(...child)), ...(slots.default ? [slots.default()] : [])],
-    ],
+    );
-  );
+  };
-};
 
 export default createLucideIcon;

packages/lucide-vue/nuxt.js

@@ -1,11 +0,0 @@
-import { join } from 'path';
-
-export default function LucideNuxtPlugin() {
-  this.nuxt.hook('components:dirs', (dirs) => {
-    dirs.push({
-      path: join(__dirname, 'dist', 'esm', 'icons'),
-      prefix: 'Icon',
-      ignore: ['**/index.js'],
-    });
-  });
-}

packages/lucide-vue/scripts/exportTemplate.mjs

@@ -1,26 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
-
-export default ({ componentName, iconName, children, getSvg, deprecated }) => {
-  const svgContents = getSvg();
-  const svgBase64 = base64SVG(svgContents);
-
-  return `
-import createLucideIcon from '../createLucideIcon';
-
-/**
- * @component @name ${componentName}
- * @description Lucide SVG icon component, renders SVG Element with children.
- *
- * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
- * @see https://lucide.dev/guide/packages/lucide-vue - Documentation
- *
- * @param {Object} props - Lucide icons props and any valid SVG attribute
- * @returns {Component} Vue Component
- * ${deprecated ? '@deprecated' : ''}
- */
-const ${componentName} = createLucideIcon('${componentName}Icon', ${JSON.stringify(children)});
-
-export default ${componentName};
-`;
-};

packages/lucide-vue/src/createLucideIcon.ts

@@ -1,84 +0,0 @@
-import { Component } from 'vue';
-import { Vue, VueConfiguration } from 'vue/types/vue';
-import defaultAttributes from './defaultAttributes';
-
-var showDeprecationWarning = true;
-
-type IconNode = [elementName: string, attrs: Record<string, string>][]
-
-/**
- * Converts string to KebabCase
- * Copied from scripts/helper. If anyone knows how to properly import it here
- * then please fix it.
- *
- * @param {string} string
- * @returns {string} A kebabized string
- */
-export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
-export default (iconName: string, iconNode: IconNode): Component => ({
-  name: iconName,
-  functional: true,
-  props: {
-    color: {
-      type: String,
-      default: 'currentColor',
-    },
-    size: {
-      type: Number,
-      default: 24,
-    },
-    strokeWidth: {
-      type: Number,
-      default: 2,
-    },
-    absoluteStrokeWidth: {
-      type: Boolean,
-      default: false,
-    },
-    defaultClass: {
-      type: String,
-      default: `lucide-icon lucide lucide-${toKebabCase(iconName).replace('-icon', '')}`,
-    },
-  },
-  render(
-    createElement,
-    {
-      props: { color, size, strokeWidth, absoluteStrokeWidth, defaultClass },
-      data,
-      children = [],
-    },
-  ) {
-    if (showDeprecationWarning) {
-      console.warn(
-        '[Lucide Vue] This package will be deprecated end of 2023. Please upgrade to Vue 3 and use the latest lucide package for Vue.',
-      );
-      showDeprecationWarning = false;
-    }
-
-    return createElement(
-      'svg',
-      {
-        // prettier-ignore
-        class: [defaultClass, data.class, data.staticClass, data.attrs && data.attrs.class].filter(Boolean),
-        style: [data.style, data.staticStyle, data.attrs && data.attrs.style].filter(Boolean),
-        attrs: {
-          ...defaultAttributes,
-          width: size,
-          height: size,
-          stroke: color,
-          'stroke-width':
-            absoluteStrokeWidth
-              ? Number(strokeWidth) * 24 / Number(size)
-              : strokeWidth,
-          ...data.attrs,
-        },
-        on: data?.on || {}
-      },
-      [
-        ...iconNode.map(([tag, attrs]) => createElement(String(tag), { attrs })),
-        ...children
-      ],
-    );
-  },
-});

packages/lucide-vue/src/defaultAttributes.ts

@@ -1,13 +0,0 @@
-const defaultAttributes = {
-  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',
-};
-
-export default defaultAttributes

packages/lucide-vue/src/icons/.gitkeep

@@ -1 +0,0 @@
-Folder for generated icons

packages/lucide-vue/src/lucide-vue.ts

@@ -1,3 +0,0 @@
-export * from './icons';
-export * as icons from './icons';
-export * from './aliases';

packages/lucide-vue/tests/__snapshots__/lucide-vue.spec.ts.snap

@@ -1,215 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Using lucide icon components > should add a class to the element 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile my-icon"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-  </svg>
-</div>
-`;
-
-exports[`Using lucide icon components > should add a style attribute to the element 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    style="position: absolute"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-  </svg>
-</div>
-`;
-
-exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile"
-    fill="none"
-    height="48"
-    stroke="red"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="4"
-    viewBox="0 0 24 24"
-    width="48"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-  </svg>
-</div>
-`;
-
-exports[`Using lucide icon components > should pass children to the icon slot 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-    <text>
-      Hello World
-    </text>
-  </svg>
-</div>
-`;
-
-exports[`Using lucide icon components > should render an component 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-  </svg>
-</div>
-`;

packages/lucide-vue/tests/lucide-vue.spec.ts

@@ -1,133 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent, cleanup } from '@testing-library/vue'
-import { Smile, Pen, Edit2 } from '../src/lucide-vue'
-import { afterEach } from 'vitest';
-import { VueClass } from '@vue/test-utils';
-
-describe('Using lucide icon components', () => {
-  afterEach(() => cleanup())
-
-  it('should render an component', () => {
-    const {container} = render(Smile as VueClass<any>)
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should adjust the size, stroke color and stroke width', () => {
-    const {container} = render(Smile as VueClass<any>, {
-      props: {
-        size: 48,
-        color: 'red',
-        strokeWidth: 4
-      }
-    })
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    expect(icon.getAttribute('width')).toBe('48')
-    expect(icon.getAttribute('stroke')).toBe('red')
-    expect(icon.getAttribute('stroke-width')).toBe('4')
-
-    expect(container).toMatchSnapshot();
-  });
-
-
-  it('should add a class to the element', () => {
-    const {container} = render(Smile as VueClass<any>, {
-      attrs: {
-        class: "my-icon"
-      }
-    })
-
-    expect(container).toMatchSnapshot();
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    expect(icon).toHaveClass('my-icon')
-    expect(icon).toHaveClass('lucide-smile')
-    expect(icon).toHaveClass('lucide')
-  });
-
-  it('should add a style attribute to the element', () => {
-    const {container} = render(Smile as VueClass<any>, {
-      attrs: {
-        style: 'position: absolute',
-      }
-    })
-
-    expect(container).toMatchSnapshot();
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    expect(icon).toHaveStyle({ position: 'absolute' })
-  });
-
-  it('should call the onClick event', async () => {
-    const onClick = vi.fn()
-    render(Smile  as VueClass<any>, {
-      listeners: {
-        click: onClick
-      }
-    })
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    await fireEvent.click(icon)
-
-    expect(onClick).toHaveBeenCalled()
-  });
-
-  it('should pass children to the icon slot', () => {
-    const testText = 'Hello World'
-    const template = `<text>${testText}</text>`
-    const { getByText, container } = render(Smile as VueClass<any>, {
-      slots: {
-        default: { template }
-      }
-    })
-
-    const textElement = getByText(testText)
-
-    expect(textElement).toBeInTheDocument()
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render the alias icon', () => {
-    const { getByText, container } = render(Pen as VueClass<any>, {
-      props: {
-        size: '48',
-        color: 'red',
-        strokeWidth: '4'
-      }
-    })
-
-    const PenIconRenderedHTML = container.innerHTML
-
-    cleanup()
-
-    const { container: Edit2Container } = render(Edit2 as VueClass<any>, {
-      props: {
-        size: '48',
-        color: 'red',
-        strokeWidth: '4'
-      }
-    })
-
-    expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
-  })
-
-  it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
-    const { getByText, container } = render(Pen as VueClass<any>, {
-      props: {
-        size: '48',
-        color: 'red',
-        absoluteStrokeWidth: true
-      }
-    })
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    expect(icon.getAttribute('width')).toBe('48')
-    expect(icon.getAttribute('stroke')).toBe('red')
-    expect(icon.getAttribute('stroke-width')).toBe('1')
-  })
-});

packages/lucide-vue/tests/setupVitest.js

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

packages/vue/README.md

@@ -1,21 +1,19 @@
 # Lucide Vue
 
-Implementation of the lucide icon library for Vue applications.
+Implementation of the lucide icon library for Vue 3 applications.
 
 > What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
 
-> :warning: This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next#lucide-vue-next)
-
 ## Installation
 
 ```sh
-yarn add lucide-vue
+yarn add @lucide/vue
 ```
 
 or
 
 ```sh
-npm install lucide-vue
+npm install @lucide/vue
 ```
 
 ## How to use
@@ -34,7 +32,7 @@ You can pass additional props to adjust the icon.
 
 <script>
 // Returns Vue component
-import { Camera } from 'lucide-vue';
+import { Camera } from '@lucide/vue';
 
 export default {
   name: 'My Component',
@@ -77,7 +75,7 @@ It is possible to create one generic icon component to load icons.
 </template>
 
 <script>
-import * as icons from 'lucide-vue';
+import * as icons from '@lucide/vue';
 
 export default {
   props: {
@@ -104,25 +102,3 @@ export default {
   </div>
 </template>
 ```
-
-## Use with [@nuxt/components](https://github.com/nuxt/components#readme)
-
-### Setup
-
-In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules`
-
-```js
-export default {
-  buildModules: ['lucide-vue/nuxt']
-};
-```
-
-### How to use
-
-Icon components are prefixed with `Icon`. Use icon components without importing them.
-
-### Example
-
-```html
-<IconCamera color="red" :size="32" />
-```

packages/vue/package.json

@@ -1,15 +1,15 @@
 {
-  "name": "lucide-vue",
+  "name": "@lucide/vue",
   "version": "0.0.1",
   "author": "Eric Fennis",
-  "description": "A Lucide icon library package for Vue 2 applications",
+  "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
   "repository": {
     "type": "git",
     "url": "https://github.com/lucide-icons/lucide.git",
-    "directory": "packages/lucide-vue"
+    "directory": "packages/vue"
   },
   "keywords": [
     "Lucide",
@@ -22,12 +22,13 @@
     "Fontawesome",
     "Font Awesome"
   ],
-  "amdName": "lucide-vue",
+  "amdName": "lucide-vue-next",
-  "source": "build/lucide-vue.js",
+  "source": "build/lucide-vue-next.js",
-  "main": "dist/cjs/lucide-vue.js",
+  "main": "dist/cjs/lucide-vue-next.js",
-  "main:umd": "dist/umd/lucide-vue.js",
+  "main:umd": "dist/umd/lucide-vue-next.js",
-  "module": "dist/esm/lucide-vue.js",
+  "module": "dist/esm/lucide-vue-next.js",
-  "unpkg": "dist/umd/lucide-vue.min.js",
+  "unpkg": "dist/umd/lucide-vue-next.min.js",
+  "typings": "dist/lucide-vue-next.d.ts",
   "sideEffects": false,
   "files": [
     "dist",
@@ -36,7 +37,7 @@
   "scripts": {
     "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
     "copy:license": "cp ../../LICENSE ./LICENSE",
-    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
+    "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
     "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "vitest run",
@@ -45,18 +46,17 @@
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
     "@lucide/rollup-plugins": "workspace:*",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/vue": "^5.9.0",
+    "@testing-library/vue": "^8.0.1",
-    "@vitejs/plugin-vue2": "2.2.0",
+    "@vitejs/plugin-vue": "^4.6.2",
-    "@vue/test-utils": "1.3.0",
+    "@vue/test-utils": "2.4.3",
-    "rollup": "^3.23.0",
+    "rollup": "^4.9.2",
-    "typescript": "^4.9.5",
+    "rollup-plugin-dts": "^6.1.0",
     "vite": "5.0.12",
-    "vitest": "^0.32.2",
+    "vitest": "^1.1.1",
-    "vue": "2.7.14",
+    "vue": "^3.0.1"
-    "vue-template-compiler": "2.7.14"
   },
   "peerDependencies": {
-    "vue": "^2.6.12"
+    "vue": ">=3.0.1"
   }
 }

packages/vue/rollup.config.mjs

@@ -1,5 +1,6 @@
 import plugins, { replace } from '@lucide/rollup-plugins';
 import pkg from './package.json' assert { type: 'json' };
+import dts from "rollup-plugin-dts";
 
 const packageName = 'LucideVue';
 const outputFileName = 'lucide-vue';
@@ -56,4 +57,19 @@ const configs = bundles
   )
   .flat();
 
-export default configs;
+  export default [
+    {
+      input: inputs[0],
+      output: [{
+        file: `dist/${outputFileName}.d.ts`, format: "es"
+      }],
+      plugins: [
+        dts({
+          compilerOptions: {
+            preserveSymlinks: false
+          }
+        })
+      ],
+    },
+    ...configs
+  ];

packages/vue/scripts

@@ -0,0 +1 @@
+../lucide-vue-next/scripts

packages/vue/src

@@ -0,0 +1 @@
+../lucide-vue-next/src

packages/vue/tests

@@ -0,0 +1 @@
+../lucide-vue-next/tests

packages/vue/tsconfig.json

@@ -11,7 +11,6 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
-    "noEmit": true
+    "noEmit": true,
-  },
+  }
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 }

packages/vue/vitest.config.mts

@@ -1,19 +1,11 @@
 import { defineConfig } from 'vitest/config'
-import vue from '@vitejs/plugin-vue2'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   plugins: [vue()],
   test: {
     globals: true,
     environment: 'jsdom',
-    transformMode: {
-      web: [/\.jsx?$/],
-    },
     setupFiles: './tests/setupVitest.js',
-    threads: false,
-    isolate: false,
-  },
-  resolve: {
-    conditions: ['development', 'browser'],
   },
 });

pnpm-lock.yaml

@@ -131,8 +131,8 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
       sandpack-vue3:
-        specifier: ^3.1.9
+        specifier: 3.1.8
-        version: 3.1.9(@lezer/common@1.2.0)(vue@3.4.13)
+        version: 3.1.8(@lezer/common@1.2.0)(vue@3.4.13)
       semver:
         specifier: ^7.5.2
         version: 7.5.4
@@ -3781,7 +3781,7 @@ packages:
       mime: 3.0.0
     dev: true
 
-  /@codemirror/autocomplete@6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0):
+  /@codemirror/autocomplete@6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0):
     resolution: {integrity: sha512-r4IjdYFthwbCQyvqnSlx0WBHRHi8nBvU+WjJxFUij81qsBfhNudf/XKKmmC2j3m0LaOYUQTf3qiEK1J8lO1sdg==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
@@ -3790,7 +3790,7 @@ packages:
       '@lezer/common': ^1.0.0
     dependencies:
       '@codemirror/language': 6.10.0
-      '@codemirror/state': 6.2.1
+      '@codemirror/state': 6.4.0
       '@codemirror/view': 6.23.0
       '@lezer/common': 1.2.0
     dev: false
@@ -3807,9 +3807,9 @@ packages:
   /@codemirror/lang-css@6.2.1(@codemirror/view@6.23.0):
     resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
     dependencies:
-      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
+      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
       '@codemirror/language': 6.10.0
-      '@codemirror/state': 6.2.1
+      '@codemirror/state': 6.4.0
       '@lezer/common': 1.2.0
       '@lezer/css': 1.1.3
     transitivePeerDependencies:
@@ -3819,11 +3819,11 @@ packages:
   /@codemirror/lang-html@6.4.6:
     resolution: {integrity: sha512-E4C8CVupBksXvgLSme/zv31x91g06eZHSph7NczVxZW+/K+3XgJGWNT//2WLzaKSBoxpAjaOi5ZnPU1SHhjh3A==}
     dependencies:
-      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
+      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
       '@codemirror/lang-css': 6.2.1(@codemirror/view@6.23.0)
       '@codemirror/lang-javascript': 6.2.1
       '@codemirror/language': 6.10.0
-      '@codemirror/state': 6.2.1
+      '@codemirror/state': 6.4.0
       '@codemirror/view': 6.23.0
       '@lezer/common': 1.2.0
       '@lezer/css': 1.1.3
@@ -3833,10 +3833,10 @@ packages:
   /@codemirror/lang-javascript@6.2.1:
     resolution: {integrity: sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==}
     dependencies:
-      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
+      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
       '@codemirror/language': 6.10.0
       '@codemirror/lint': 6.4.2
-      '@codemirror/state': 6.2.1
+      '@codemirror/state': 6.4.0
       '@codemirror/view': 6.23.0
       '@lezer/common': 1.2.0
       '@lezer/javascript': 1.4.7
@@ -3845,7 +3845,7 @@ packages:
   /@codemirror/language@6.10.0:
     resolution: {integrity: sha512-2vaNn9aPGCRFKWcHPFksctzJ8yS5p7YoaT+jHpc0UGKzNuAIx4qy6R5wiqbP+heEEdyaABA582mNqSHzSoYdmg==}
     dependencies:
-      '@codemirror/state': 6.2.1
+      '@codemirror/state': 6.4.0
       '@codemirror/view': 6.23.0
       '@lezer/common': 1.2.0
       '@lezer/highlight': 1.1.6
@@ -3856,15 +3856,11 @@ packages:
   /@codemirror/lint@6.4.2:
     resolution: {integrity: sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==}
     dependencies:
-      '@codemirror/state': 6.2.1
+      '@codemirror/state': 6.4.0
       '@codemirror/view': 6.23.0
       crelt: 1.0.6
     dev: false
 
-  /@codemirror/state@6.2.1:
-    resolution: {integrity: sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==}
-    dev: false
-
   /@codemirror/state@6.4.0:
     resolution: {integrity: sha512-hm8XshYj5Fo30Bb922QX9hXB/bxOAVH+qaqHBzw5TKa72vOeslyGwd4X8M0c1dJ9JqxlaMceOQ8RsL9tC7gU0A==}
     dev: false
@@ -19193,8 +19189,8 @@ packages:
       rimraf: 2.7.1
     dev: true
 
-  /sandpack-vue3@3.1.9(@lezer/common@1.2.0)(vue@3.4.13):
+  /sandpack-vue3@3.1.8(@lezer/common@1.2.0)(vue@3.4.13):
-    resolution: {integrity: sha512-s/W5I9o1fpQnGiuCy7QcpnwFB/JopwZU2dwI7YXXYFI1FYv21CfI/jz3bDWAN6GzWUt3BIxNFuzzdwqgd5zPWw==}
+    resolution: {integrity: sha512-XdlFSWXLOgpGAeZUUHbOxWYezVQxJOSjz7dlObTx8et9vKAn1lPf4A19qdOykzH13RNTDv0gXflRsXbJLQ4H2w==}
     engines: {node: '>=16'}
     peerDependencies:
       vue: '>=3.2.0'
@@ -19202,13 +19198,13 @@ packages:
       vue:
         optional: true
     dependencies:
-      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
+      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
       '@codemirror/commands': 6.3.3
       '@codemirror/lang-css': 6.2.1(@codemirror/view@6.23.0)
       '@codemirror/lang-html': 6.4.6
       '@codemirror/lang-javascript': 6.2.1
       '@codemirror/language': 6.10.0
-      '@codemirror/state': 6.2.1
+      '@codemirror/state': 6.4.0
       '@codemirror/view': 6.23.0
       '@codesandbox/sandpack-client': 2.11.2
       '@lezer/highlight': 1.1.6

scripts/generateChangedIconsCommentMarkup.mjs

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { shuffle, readSvgDirectory, getCurrentDirPath } from './helpers.mjs';
+import { shuffle, readSvgDirectory, getCurrentDirPath, minifySvg } from './helpers.mjs';
 
 const currentDir = getCurrentDirPath(import.meta.url);
 const ICONS_DIR = path.resolve(currentDir, '../icons');
@@ -17,11 +17,10 @@ const getImageTagsByFiles = (files, getBaseUrl, width) =>
   files
     .map((file) => {
       const svgContent = fs.readFileSync(path.join(process.cwd(), file), 'utf-8');
-      const strippedAttrsSVG = svgContent
+      const strippedAttrsSVG = svgContent.replace(/<svg[^>]*>/, '<svg>')
-        .replace(/<svg[^>]*>/, '<svg>')
+      const minifiedSvg = minifySvg(strippedAttrsSVG)
-        .replaceAll(/\n| {2}|\t/g, '');
 
-      const base64 = Buffer.from(strippedAttrsSVG).toString('base64');
+      const base64 = Buffer.from(minifiedSvg).toString('base64');
       const url = getBaseUrl(file);
       const widthAttr = width ? `width="${width}"` : '';
 

scripts/helpers.mjs

@@ -208,3 +208,17 @@ export const shuffle = (array) => {
   }
   return array;
 };
+
+/**
+ * Minifies SVG
+ *
+ * @param {string} string
+ * @returns string
+ */
+export function minifySvg(string){
+  return string ? string
+    .replace(/\>[\r\n ]+</g, "><")
+    .replace(/(<.*?>)|\s+/g, (m, $1) => $1 || ' ')
+    .trim()
+    : ""
+}