Add bot-2 icon (#1544)

* Add bot-2 icon

* replace existing bot icon

.github/workflows/lucide-react.yml

@@ -5,6 +5,7 @@ on:
     paths:
       - packages/lucide-react/**
       - tools/build-icons/**
+      - scripts/generateNextJSAliases.mjs
       - pnpm-lock.yaml
 
 jobs:

docs/.vitepress/config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
   description,
   cleanUrls: true,
   outDir: '.vercel/output/static',
+  srcExclude: ['**/README.md'],
   vite: {
     resolve: {
       alias: [

docs/.vitepress/lib/createCodeExamples.ts

@@ -24,7 +24,7 @@ const getIconCodes = (): CodeExampleType => {
       codes: [
         {
           language: 'html',
-          code: `<i data-lucide-name="Name"></i>
+          code: `<i data-lucide="Name"></i>
 `,
         },
       ],

docs/README.md

@@ -3,8 +3,6 @@
 The Lucide docs website is built with Vitepress: https://vitepress.dev/
 This is Markdown-based documentation powered by Vue.
 
-This is why this file is in txt format.
-
 ## Development
 
 ```sh

docs/guide/packages/lucide-preact.md

@@ -26,9 +26,9 @@ npm install lucide-preact
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Preact component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Preact component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -56,7 +56,7 @@ export default App;
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```jsx
 // Usage
@@ -69,10 +69,10 @@ const App = () => {
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

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

@@ -52,7 +52,7 @@ export default App;
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component.
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements.
 
 ```jsx
 // Usage
@@ -63,10 +63,10 @@ const App = () => {
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: warning
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important  to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

docs/guide/packages/lucide-react.md

@@ -22,9 +22,9 @@ npm install lucide-react
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a React component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -52,7 +52,7 @@ export default App;
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```jsx
 // Usage
@@ -63,10 +63,10 @@ const App = () => {
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 
 This is not the case for the latest NextJS, because it uses server side rendering. The icons will be streamed to the client when needed. For NextJS with Dynamic Imports, see [dynamic imports](#nextjs-example) section for more information.
 :::
@@ -101,7 +101,7 @@ export default App;
 
 > :warning: This is experimental and only works with bundlers that support dynamic imports.
 
-Lucide react exports a dynamic import map `dynamicIconImports`. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database.
+Lucide react exports a dynamic import map `dynamicIconImports`, which is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system with where icon names are stored in a database.
 
 When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size.
 

docs/guide/packages/lucide-solid.md

@@ -22,9 +22,9 @@ npm install lucide-solid
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Solid component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Solid component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -52,7 +52,7 @@ export default App;
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```jsx
 // Usage
@@ -66,7 +66,7 @@ const App = () => {
 It is possible to create one generic icon component to load icons. It's not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important  to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

docs/guide/packages/lucide-svelte.md

@@ -22,9 +22,9 @@ npm install lucide-svelte
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Svelte component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Svelte component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -59,7 +59,7 @@ Additional props can be passed to adjust the icon:
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```svelte
 <script>
@@ -73,10 +73,10 @@ This results a filled phone icon.
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

docs/guide/packages/lucide-vue-next.md

@@ -28,9 +28,9 @@ npm install lucide-vue-next
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Vue component, which renders an inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -61,7 +61,7 @@ import { Camera } from 'lucide-vue-next';
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```vue
 <template>
@@ -71,10 +71,10 @@ To apply custom props to change the look of the icon, this can be done by simply
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

docs/guide/packages/lucide-vue.md

@@ -28,9 +28,9 @@ npm install lucide-vue
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Vue component, which renders an inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -63,7 +63,7 @@ Additional props can be passed to adjust the icon:
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```vue
 <template>
@@ -73,10 +73,10 @@ To apply custom props to change the look of the icon, this can be done by simply
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

icons/arrow-down-0-1.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-01"
   ]
 }

icons/arrow-down-1-0.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-10"
   ]
 }

icons/arrow-down-a-z.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-az"
   ]
 }

icons/arrow-down-z-a.json

@@ -14,5 +14,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-za"
   ]
 }

icons/arrow-up-0-1.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-01"
   ]
 }

icons/arrow-up-1-0.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-10"
   ]
 }

icons/arrow-up-a-z.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-az"
   ]
 }

icons/arrow-up-z-a.json

@@ -14,5 +14,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-za"
   ]
 }

icons/axis-3d.json

@@ -11,5 +11,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "axis-3-d"
   ]
 }

icons/badge-percent.json

@@ -8,12 +8,17 @@
     "verified",
     "unverified",
     "sale",
-    "marketing"
+    "discount",
+    "offer",
+    "marketing",
+    "sticker",
+    "price tag"
   ],
   "categories": [
     "account",
     "social",
     "money",
+    "shopping",
     "maths",
     "shapes"
   ]

icons/bot.json

@@ -1,7 +1,6 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "mittalyashu",
     "ericfennis"
   ],
   "tags": [
@@ -14,4 +13,4 @@
     "development",
     "social"
   ]
-}
+}

icons/bot.svg

@@ -9,9 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="10" x="3" y="11" rx="2" />
-  <circle cx="12" cy="5" r="2" />
-  <path d="M12 7v4" />
-  <line x1="8" x2="8" y1="16" y2="16" />
-  <line x1="16" x2="16" y1="16" y2="16" />
+  <path d="M12 8V4H8" />
+  <rect width="16" height="12" x="4" y="8" rx="2" />
+  <path d="M2 14h2" />
+  <path d="M20 14h2" />
+  <path d="M15 13v2" />
+  <path d="M9 13v2" />
 </svg>

icons/circle-slash-2.json

@@ -11,6 +11,11 @@
     "null",
     "void",
     "ban",
+    "maths",
+    "divide",
+    "division",
+    "half",
+    "split",
     "/"
   ],
   "categories": [

icons/circle-slash.json

@@ -21,9 +21,14 @@
     "mistake",
     "wrong",
     "failure",
+    "divide",
+    "division",
+    "or",
     "/"
   ],
   "categories": [
-    "shapes"
+    "shapes",
+    "development",
+    "maths"
   ]
 }

icons/clapperboard.json

@@ -2,15 +2,21 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "it-is-not",
-    "ericfennis"
+    "ericfennis",
+    "danielbayley"
   ],
   "tags": [
     "movie",
     "film",
     "video",
     "camera",
+    "cinema",
+    "cut",
+    "action",
+    "television",
     "tv",
-    "television"
+    "show",
+    "entertainment"
   ],
   "categories": [
     "multimedia"

icons/clapperboard.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8H4Z" />
-  <path d="m4 11-.88-2.87a2 2 0 0 1 1.33-2.5l11.48-3.5a2 2 0 0 1 2.5 1.32l.87 2.87L4 11.01Z" />
-  <path d="m6.6 4.99 3.38 4.2" />
-  <path d="m11.86 3.38 3.38 4.2" />
+  <path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" />
+  <path d="m6.2 5.3 3.1 3.9" />
+  <path d="m12.4 3.4 3.1 4" />
+  <path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
 </svg>

icons/copy-slash.json

@@ -18,10 +18,12 @@
     "divide",
     "division",
     "split",
+    "or",
     "/"
   ],
   "categories": [
     "text",
+    "development",
     "maths"
   ]
 }

icons/file-axis-3d.json

@@ -12,5 +12,8 @@
   "categories": [
     "design",
     "files"
+  ],
+  "aliases": [
+    "file-axis-3-d"
   ]
 }

icons/film.json

@@ -2,11 +2,16 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "colebemis",
-    "ericfennis"
+    "ericfennis",
+    "danielbayley"
   ],
   "tags": [
     "movie",
-    "video"
+    "video",
+    "reel",
+    "camera",
+    "cinema",
+    "entertainment"
   ],
   "categories": [
     "photography",

icons/film.svg

@@ -9,12 +9,12 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18" />
-  <line x1="7" x2="7" y1="2" y2="22" />
-  <line x1="17" x2="17" y1="2" y2="22" />
-  <line x1="2" x2="22" y1="12" y2="12" />
-  <line x1="2" x2="7" y1="7" y2="7" />
-  <line x1="2" x2="7" y1="17" y2="17" />
-  <line x1="17" x2="22" y1="17" y2="17" />
-  <line x1="17" x2="22" y1="7" y2="7" />
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="M7 3v18" />
+  <path d="M3 7.5h4" />
+  <path d="M3 12h18" />
+  <path d="M3 16.5h4" />
+  <path d="M17 3v18" />
+  <path d="M17 7.5h4" />
+  <path d="M17 16.5h4" />
 </svg>

icons/grid-2x2.json

@@ -26,5 +26,8 @@
     "design",
     "shapes",
     "maths"
+  ],
+  "aliases": [
+    "grid-2-x-2"
   ]
 }

icons/grid-3x3.json

@@ -18,6 +18,7 @@
     "design"
   ],
   "aliases": [
-    "grid"
+    "grid",
+    "grid-3-x-3"
   ]
 }

icons/move-3d.json

@@ -14,5 +14,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "move-3-d"
   ]
 }

icons/percent-circle.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "verified",
+    "unverified",
+    "sale",
+    "discount",
+    "offer",
+    "marketing",
+    "sticker",
+    "price tag"
+  ],
+  "categories": [
+    "account",
+    "social",
+    "money",
+    "shopping",
+    "maths",
+    "shapes"
+  ]
+}

icons/percent-circle.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <path d="m15 9-6 6" />
+  <path d="M9 9h.01" />
+  <path d="M15 15h.01" />
+</svg>

icons/percent-diamond.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "verified",
+    "unverified",
+    "sale",
+    "discount",
+    "offer",
+    "marketing",
+    "sticker",
+    "price tag"
+  ],
+  "categories": [
+    "account",
+    "social",
+    "money",
+    "shopping",
+    "maths",
+    "shapes"
+  ]
+}

icons/percent-diamond.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.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0Z" />
+  <path d="M9.2 9.2h.01" />
+  <path d="m14.5 9.5-5 5" />
+  <path d="M14.7 14.8h.01" />
+</svg>

icons/percent-square.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "verified",
+    "unverified",
+    "sale",
+    "discount",
+    "offer",
+    "marketing",
+    "sticker",
+    "price tag"
+  ],
+  "categories": [
+    "account",
+    "social",
+    "money",
+    "shopping",
+    "maths",
+    "shapes"
+  ]
+}

icons/percent-square.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"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="m15 9-6 6" />
+  <path d="M9 9h.01" />
+  <path d="M15 15h.01" />
+</svg>

icons/percent.json

@@ -5,15 +5,20 @@
     "ericfennis"
   ],
   "tags": [
-    "discount",
     "percentage",
     "modulo",
     "modulus",
     "remainder",
-    "%"
+    "%",
+    "sale",
+    "discount",
+    "offer",
+    "marketing"
   ],
   "categories": [
     "maths",
-    "development"
+    "development",
+    "money",
+    "shopping"
   ]
 }

icons/rotate-3d.json

@@ -11,5 +11,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "rotate-3-d"
   ]
 }

icons/scale-3d.json

@@ -12,5 +12,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "scale-3-d"
   ]
 }

icons/slash.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "divide",
+    "division",
+    "or",
+    "/"
+  ],
+  "categories": [
+    "development",
+    "maths"
+  ]
+}

icons/slash.svg

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

icons/square-slash.json

@@ -12,10 +12,12 @@
     "divide",
     "division",
     "shortcut",
-    "/"
+    "or",
+    "/"    
   ],
   "categories": [
     "shapes",
+    "development",
     "maths"
   ]
 }

icons/sun-moon.json

@@ -1,17 +1,23 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
+    "itsjavi",
     "mittalyashu",
     "karsa-mistmere"
   ],
   "tags": [
     "night",
+    "dark",
     "light",
     "moon",
     "sun",
-    "brightness"
+    "brightness",
+    "theme",
+    "auto theme",
+    "system theme",
+    "appearance"
   ],
   "categories": [
     "accessibility"
   ]
-}
+}

icons/sun-moon.svg

@@ -9,14 +9,13 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <circle cx="12" cy="12" r="4" />
-  <path d="M12 8a2 2 0 1 0 4 4" />
+  <path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4" />
   <path d="M12 2v2" />
   <path d="M12 20v2" />
-  <path d="m4.93 4.93 1.41 1.41" />
-  <path d="m17.66 17.66 1.41 1.41" />
+  <path d="m4.9 4.9 1.4 1.4" />
+  <path d="m17.7 17.7 1.4 1.4" />
   <path d="M2 12h2" />
   <path d="M20 12h2" />
-  <path d="m6.34 17.66-1.41 1.41" />
-  <path d="m19.07 4.93-1.41 1.41" />
+  <path d="m6.3 17.7-1.4 1.4" />
+  <path d="m19.1 4.9-1.4 1.4" />
 </svg>

package.json

@@ -26,6 +26,7 @@
     "categories2icons": "node scripts/migrateCategoriesToIcons.mjs --presets @babel/env",
     "generate:changelog": "node ./scripts/generateChangelog.mjs",
     "generate:contributors": "node ./scripts/updateContributors.mjs icons/*.svg",
+    "generate:nextJSAliases": "node ./scripts/generateNextJSAliases.mjs",
     "postinstall": "husky install",
     "lint": "eslint --ext .ts,.js,.mjs ./{packages/lucide,scripts}",
     "prepare": "husky install",
@@ -50,7 +51,10 @@
     "svgson": "^5.2.1"
   },
   "lint-staged": {
-    "icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
+    "icons/*.svg":[
+      "node ./scripts/optimizeStagedSvgs.mjs",
+      "node ./scripts/generateNextJSAliases.mjs"
+    ]
   },
   "packageManager": "pnpm@7.14.0",
   "pnpm": {

packages/lucide-svelte/package.json

@@ -15,17 +15,17 @@
   "main": "dist/esm/lucide-svelte.js",
   "exports": {
     ".": {
-      "default": "./dist/esm/lucide-svelte.js",
       "svelte": "./dist/svelte/lucide-svelte.js",
-      "types": "./dist/lucide-svelte.d.ts"
+      "types": "./dist/lucide-svelte.d.ts",
+      "default": "./dist/esm/lucide-svelte.js"
     },
     "./icons": {
-      "default": "./dist/esm/icons/index.js",
-      "svelte": "./dist/svelte/icons/index.js"
+      "svelte": "./dist/svelte/icons/index.js",
+      "default": "./dist/esm/icons/index.js"
     },
     "./icons/*": {
-      "default": "./dist/esm/icons/*.js",
-      "svelte": "./dist/svelte/icons/*.svelte"
+      "svelte": "./dist/svelte/icons/*.svelte",
+      "default": "./dist/esm/icons/*.js"
     }
   },
   "typings": "dist/lucide-svelte.d.ts",

scripts/generateNextJSAliases.mjs

@@ -0,0 +1,46 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { getCurrentDirPath, readSvgDirectory } from './helpers.mjs';
+
+// This is a special case convertion NextJS uses for their modularize imports. We try to follow the same convention, to generate the same imports.
+function pascalToKebabNextJSFlavour(str) {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+    .replace(/([a-z])-?([0-9]+|[A-Z])/g, '$1-$2')
+    .replace(/([0-9]+)-?([a-zA-Z])/g, '$1-$2')
+    .replace(/([0-9])-([0-9])/g, '$1$2')
+    .split('-')
+    .map((word) => word.toLowerCase())
+    .join('-');
+}
+
+const currentDir = getCurrentDirPath(import.meta.url);
+const ICONS_DIR = path.resolve(currentDir, '../icons');
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+const iconNames = svgFiles.map((icon) => icon.split('.')[0]).reverse();
+
+console.log('Creating aliases for NextJS imports: ');
+
+Promise.all(
+  iconNames.map(async (iconName) => {
+    const pascalCaseName = iconName.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+
+    const iconNameKebabCaseNextjsFlavour = pascalToKebabNextJSFlavour(pascalCaseName);
+
+    if (iconName !== iconNameKebabCaseNextjsFlavour) {
+      console.log(iconName, '➡️', iconNameKebabCaseNextjsFlavour);
+
+      const metaJson = await fs.readFile(path.resolve(ICONS_DIR, `${iconName}.json`), 'utf-8');
+      const iconMetaData = JSON.parse(metaJson);
+
+      const aliases = iconMetaData.aliases ?? [];
+      aliases.push(iconNameKebabCaseNextjsFlavour);
+
+      const output = JSON.stringify({ ...iconMetaData, aliases }, null, 2);
+      fs.writeFile(path.resolve(ICONS_DIR, `${iconName}.json`), output, 'utf-8');
+    }
+  }),
+);

tools/build-icons/building/generateAliasesFile.mjs

@@ -45,6 +45,11 @@ export default async function generateAliasesFile({
               await fs.promises.writeFile(location, output, 'utf-8');
             }
 
+            // Don't import the same icon twice
+            if (componentName === componentNameAlias) {
+              return;
+            }
+
             const exportFileIcon = separateAliasesFile ? alias : iconName;
 
             importString += getImportString(