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>

.eslintrc.js

@@ -7,20 +7,12 @@ module.exports = {
     node: true,
   },
   extends: ['airbnb-base', 'prettier'],
-  plugins: ['import', 'prettier', '@html-eslint'],
+  plugins: ['import', '@html-eslint'],
   rules: {
     'no-console': 'off',
     'no-param-reassign': 'off',
     'no-shadow': 'off',
     'no-use-before-define': 'off',
-    'prettier/prettier': [
-      'error',
-      {
-        singleQuote: true,
-        trailingComma: 'all',
-        printWidth: 100
-      },
-    ],
     'import/no-extraneous-dependencies': [
       'error',
       { devDependencies: ['**/*.test.js', '**/*.spec.js', './scripts/**'] },
@@ -46,7 +38,6 @@ module.exports = {
       files: ['./icons/*.svg'],
       parser: '@html-eslint/parser',
       rules: {
-        'prettier/prettier': 'off',
         '@html-eslint/require-doctype': 'off',
         '@html-eslint/no-duplicate-attrs': 'error',
         '@html-eslint/no-inline-styles': 'error',

.github/actions/build-and-test.yml

@@ -18,7 +18,7 @@ runs:
       name: Install pnpm
       id: pnpm-install
       with:
-        version: 7
+        version: 8
         run_install: false
 
     - name: Get pnpm store directory

.github/actions/check-icons.yml

@@ -18,7 +18,7 @@ runs:
       name: Install pnpm
       id: pnpm-install
       with:
-        version: 7
+        version: 8
         run_install: false
 
     - name: Get pnpm store directory

.prettierignore

@@ -0,0 +1,16 @@
+pnpm-lock.yaml
+
+# lucide-angular
+packages/lucide-angular/.angular/cache
+
+# lucide-static
+packages/lucide-static/icons
+packages/lucide-static/lib
+packages/lucide-static/sprite.svg
+packages/lucide-static/tags.json
+packages/lucide-static/icon-nodes.json
+packages/lucide-static/font
+
+# lucide-svelte
+packages/lucide-svelte/src/icons/*.svelte
+packages/lucide-svelte/.svelte-kit

docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/icon.css

@@ -11,6 +11,6 @@
 .app {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr
+  grid-template-rows: 1fr 1fr 1fr;
   gap: 6px;
 }

docs/guide/advanced/examples/global-styling-css-example/icon.css

@@ -9,6 +9,6 @@
 .app {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr
+  grid-template-rows: 1fr 1fr 1fr;
   gap: 6px;
 }

docs/guide/packages/lucide-react-native.md

@@ -72,7 +72,7 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
 ### Icon Component Example
 
 ```jsx
-import { icons } from 'lucide-react';
+import { icons } from 'lucide-react-native';
 
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];

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/text-search.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "find",
+    "data",
+    "copy",
+    "txt",
+    "pdf",
+    "document",
+    "scan",
+    "magnifier",
+    "magnifying glass"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/text-search.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="M21 6H3" />
+  <path d="M10 12H3" />
+  <path d="M10 18H3" />
+  <circle cx="17" cy="15" r="3" />
+  <path d="m21 19-1.9-1.9" />
+</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"
   ],

lint-staged.config.mjs

@@ -0,0 +1,23 @@
+/**
+ * @param {string[]} filenames
+ * @returns {string}
+ */
+const filenamesToAjvOption = (filenames) => filenames.map((filename) => `-d ${filename}`).join(' ');
+
+/** @satisfies {import('lint-staged').Config} */
+const config = {
+  'icons/*.svg': [
+    'node ./scripts/optimizeStagedSvgs.mjs',
+    'node ./scripts/generateNextJSAliases.mjs',
+  ],
+  'icons/*.json': (filenames) => [
+    `ajv --spec=draft2020 -s icon.schema.json ${filenamesToAjvOption(filenames)}`,
+    `prettier --write ${filenames.join(' ')}`,
+  ],
+  'categories/*.json': (filenames) => [
+    `ajv --spec=draft2020 -s category.schema.json ${filenamesToAjvOption(filenames)}`,
+    `prettier --write ${filenames.join(' ')}`,
+  ],
+};
+
+export default config;

package.json

@@ -30,10 +30,11 @@
     "generate:nextJSAliases": "node ./scripts/generateNextJSAliases.mjs",
     "postinstall": "husky install",
     "lint:es": "eslint .",
+    "lint:format": "prettier \"**/*.{js,mjs,ts,jsx,tsx,html,css,scss,json,yml,yaml}\" --write",
     "lint:json:icons": "ajv --spec=draft2020 -s icon.schema.json -d 'icons/*.json' > /dev/null",
     "lint:json:categories": "ajv --spec=draft2020 -s category.schema.json -d 'categories/*.json' > /dev/null",
     "lint:json": "pnpm run lint:json:icons && pnpm run lint:json:categories",
-    "lint": "pnpm lint:es && pnpm lint:json",
+    "lint": "pnpm lint:es && pnpm lint:format && pnpm lint:json",
     "prepare": "husky install",
     "gi": "node ./scripts/generate/generateIcons.mjs"
   },
@@ -52,40 +53,19 @@
     "eslint-import-resolver-custom-alias": "^1.3.2",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
     "minimist": "^1.2.8",
     "node-fetch": "^3.3.2",
     "p-memoize": "^7.1.1",
-    "prettier": "2.7.1",
+    "prettier": "3.1.1",
     "semver": "^7.5.4",
     "simple-git": "^3.21.0",
     "svgo": "^3.1.0",
     "svgson": "^5.3.1"
   },
-  "lint-staged": {
+  "packageManager": "pnpm@8.14.0+sha256.9cebf61abd83f68177b29484da72da9751390eaad46dfc3072d266bfbb1ba7bf",
-    "icons/*.svg": [
-      "node ./scripts/optimizeStagedSvgs.mjs",
-      "node ./scripts/generateNextJSAliases.mjs"
-    ],
-    "icons/*.json": [
-      "ajv --spec=draft2020 -s icon.schema.json -d",
-      "prettier --write --print-width=0"
-    ],
-    "categories/*.json": [
-      "ajv --spec=draft2020 -s category.schema.json -d",
-      "prettier --write --print-width=0"
-    ]
-  },
-  "packageManager": "pnpm@8.7.1",
   "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "@babel/core",
-        "@babel/preset-env"
-      ]
-    },
     "packageExtensions": {
       "vue-template-compiler": {
         "peerDependencies": {

packages/lucide-angular/.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
         'plugin:@typescript-eslint/recommended',
         'plugin:@angular-eslint/recommended',
         'plugin:@angular-eslint/template/process-inline-templates',
+        'prettier',
       ],
       rules: {
         '@angular-eslint/directive-selector': [

packages/lucide-angular/package.json

@@ -34,7 +34,6 @@
     "test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
     "test:watch": "ng test",
     "lint": "npx eslint 'src/**/*.{js,jsx,ts,tsx,html,css,scss}' --quiet --fix",
-    "format": "npx prettier 'src/**/*.{js,jsx,ts,tsx,html,css,scss}' --write",
     "e2e": "ng e2e",
     "version": "pnpm version --git-tag-version=false"
   },
@@ -59,7 +58,6 @@
     "@typescript-eslint/parser": "5.48.2",
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
     "jasmine-core": "~4.0.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.3.0",

packages/lucide-figma/package.json

@@ -23,7 +23,7 @@
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react": "^1.0.0",
     "typescript": "^4.3.2",
-    "vite": "5.0.10",
+    "vite": "5.0.12",
     "vite-plugin-singlefile": "^0.5.1"
   }
 }

packages/lucide-preact/package.json

@@ -52,7 +52,7 @@
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^5.3.3",
-    "vite": "5.0.10",
+    "vite": "5.0.12",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-react-native/package.json

@@ -58,7 +58,7 @@
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^4.8.4",
-    "vite": "5.0.10",
+    "vite": "5.0.12",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-react/package.json

@@ -61,7 +61,7 @@
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^4.9.5",
-    "vite": "5.0.10",
+    "vite": "5.0.12",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-solid/package.json

@@ -64,7 +64,7 @@
     "rollup-preset-solid": "^2.0.1",
     "solid-js": "^1.8.7",
     "typescript": "^4.9.4",
-    "vite": "5.0.10",
+    "vite": "5.0.12",
     "vite-plugin-solid": "^2.8.0",
     "vitest": "0.34.2"
   },

packages/lucide-svelte/package.json

@@ -67,7 +67,7 @@
     "svelte-check": "^3.4.4",
     "svelte-preprocess": "^5.0.4",
     "typescript": "^5.1.6",
-    "vite": "5.0.10",
+    "vite": "5.0.12",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-vue-next/package.json

@@ -52,7 +52,7 @@
     "@vue/test-utils": "2.4.3",
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
-    "vite": "5.0.10",
+    "vite": "5.0.12",
     "vitest": "^1.1.1",
     "vue": "^3.0.1"
   },

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',
-      {
-        // eslint-disable-next-line prettier/prettier
-        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/lucide/package.json

@@ -50,7 +50,7 @@
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^4.9.3",
-    "vite": "5.0.10",
+    "vite": "5.0.12",
     "vitest": "^1.1.1"
   }
 }

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.10",
+    "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'],
   },
 });

prettier.config.mjs

@@ -0,0 +1,16 @@
+/** @satisfies {import('prettier').Config} */
+const config = {
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 100,
+  overrides: [
+    {
+      files: ['icons/*.json', 'categories/*.json'],
+      options: {
+        printWidth: 0,
+      },
+    },
+  ],
+};
+
+export default config;

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/generateSuperSVG.mjs

@@ -1,6 +1,6 @@
 import path from 'path';
 import { stringify, parseSync } from 'svgson';
-import prettier from 'prettier';
+import * as prettier from 'prettier';
 import { appendFile, readSvgDirectory, getCurrentDirPath } from './helpers.mjs';
 
 import readSvgs from '../packages/lucide-static/scripts/readSvgs.mjs';
@@ -10,7 +10,7 @@ const currentDir = getCurrentDirPath(import.meta.url);
 const ICONS_DIR = path.resolve('icons');
 const PACKAGE_DIR = path.resolve(currentDir);
 
-export default function generateSprite(svgs, packageDir) {
+async function generateSprite(svgs, packageDir) {
   const symbols = svgs.map(({ parsedSvg }, index) => {
     const itemsPerRow = 10;
     const numInRow = index % itemsPerRow;
@@ -37,7 +37,7 @@ export default function generateSprite(svgs, packageDir) {
   };
 
   const spriteSvg = stringify(spriteSvgObject);
-  const prettifiedSprite = prettier.format(spriteSvg, { parser: 'babel' }).replace(/;/g, '');
+  const prettifiedSprite = (await prettier.format(spriteSvg, { parser: 'babel' })).replace(/;/g, '');
 
   const xmlMeta = `<?xml version="1.0" encoding="utf-8"?>\n`;
 
@@ -54,4 +54,4 @@ const parsedSvgs = svgs.map(({ name, contents }) => ({
   parsedSvg: parseSync(contents),
 }));
 
-generateSprite(parsedSvgs, PACKAGE_DIR);
+await generateSprite(parsedSvgs, PACKAGE_DIR);

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()
+    : ""
+}

scripts/render/processSvg.mjs

@@ -1,5 +1,5 @@
 import {optimize} from 'svgo';
-import prettier from 'prettier';
+import * as prettier from 'prettier';
 import {parseSync, stringify} from 'svgson';
 import DEFAULT_ATTRS from './default-attrs.json' assert { type: 'json' };