Merge branch 'main' of https://github.com/lucide-icons/lucide into re…

…arrange-categories

.github/workflows/close-issue-with-banned-phrases.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Check for blocked phrases in issue title
         run: |
           ISSUE_TITLE=$(jq -r '.issue.title' "$GITHUB_EVENT_PATH")
-          BLOCKED_PHRASES=("twitter" "whatsapp" "logo" "google" "tiktok" "facebook" "slack" "discord")
+          BLOCKED_PHRASES=("twitter" "whatsapp" "logo" "google" "tiktok" "facebook" "slack" "discord" "bluesky")
 
           # Check title and body for blocked phrases
           for PHRASE in "${BLOCKED_PHRASES[@]}"

.gitignore

@@ -16,7 +16,9 @@ outlined
 packages/**/src/icons/*.js
 packages/**/src/icons/*.ts
 packages/**/src/icons/*.tsx
+packages/**/src/aliases/*.ts
 packages/**/src/aliases.ts
+!packages/**/src/aliases/index.ts
 packages/**/src/dynamicIconImports.ts
 packages/**/dynamicIconImports.js
 packages/**/dynamicIconImports.d.ts

docs/.vitepress/sidebar.ts

@@ -46,6 +46,10 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
           text: 'Filled icons',
           link: '/guide/advanced/filled-icons',
         },
+        {
+          text: 'Aliased Names',
+          link: '/guide/advanced/aliased-names',
+        },
         // {
         //   text: 'Combining icons',
         // },

docs/.vitepress/theme/components/home/HomeIconCustomizer.vue

@@ -171,16 +171,14 @@ watch(absoluteStrokeWidth, (enabled) => {
   margin-top: 32px;
   padding: 0;
   background: none;
-  max-width: 280px;
 }
 
 @media (min-width: 640px) {
-
   .card {
     display: grid;
     grid-template-columns: 8fr 10fr;
   }
-/*
+  /*
   .card-column {
     flex: 1;
   } */

docs/guide/advanced/aliased-names.md

@@ -0,0 +1,93 @@
+# Aliased Names
+
+Icons can have multiple names for the same icon. This is because we choose to rename some icons to make them more consistent with the rest of the icon set, or the name was not generic. For example, the `edit-2` icon is renamed to `pen` to make the name more generic, since it is just a pen icon.
+
+Beside aliases names lucide also includes prefixed and suffixed names to use within your project. This is to prevent import name collisions with other libraries or your own code.
+
+```tsx
+// These are all the same icon
+import {
+  Home,
+  HomeIcon,
+  LucideHome,
+} from "lucide-react";
+```
+
+## Choosing import name style
+
+To be consistent in your imports or want to change the autocompletion of Lucide icons in your IDE there an option to able the choose the import name style you want.
+
+This can be done by creating a custom module declaration file to override the lucide imports and turning off the autocomplete in your IDE.
+
+### Turn off autocomplete in your IDE
+
+```json [.vscode/settings.json]
+{
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    "lucide-react", // or
+    "lucide-preact", // or
+    "lucide-react-native", // or
+    "lucide-vue-next",
+  ]
+}
+```
+
+### Create a custom module declaration file
+
+Only available for `lucide-react`, `lucide-preact`, `lucide-react-native`, `lucide-vue-next` package.
+This will enable you to choose the import name style you want to use in your project.
+
+::: code-group
+
+```ts [React]
+declare module "lucide-react" {
+  // Prefixed import names
+  export * from "lucide-react/dist/lucide-react.prefixed";
+  // or
+  // Suffixed import names
+  export * from "lucide-react/dist/lucide-react.suffixed";
+}
+```
+
+```ts [Vue]
+declare module "lucide-vue-next" {
+  // Prefixed import names
+  export * from "lucide-vue-next/dist/lucide-vue-next.prefixed";
+  // or
+  // Suffixed import names
+  export * from "lucide-vue-next/dist/lucide-vue-next.suffixed";
+}
+```
+
+```ts [Preact]
+declare module "lucide-preact" {
+  // Prefixed import names
+  export * from "lucide-preact/dist/lucide-preact.prefixed";
+  // or
+  // Suffixed import names
+  export * from "lucide-preact/dist/lucide-preact.suffixed";
+}
+```
+
+```ts [React Native]
+declare module "lucide-react-native" {
+  // Prefixed import names
+  export * from "lucide-react-native/dist/lucide-react-native.prefixed";
+  // or
+  // Suffixed import names
+  export * from "lucide-react-native/dist/lucide-react-native.suffixed";
+}
+```
+
+:::
+
+Place this in your project root or in a folder where your tsconfig.json is located, or locate it in your defined type directory.
+Easiest way is to create a `@types` folder in your project root and name the file `[package-name].d.ts`.
+
+### Import name styles
+
+| Import Style  | Available imports           | Declaration file import |
+| ------------- | --------------------------- | ----------------------- |
+| Default       | Home, HomeIcon, LucideHome  |                         |
+| Prefixed      | LucideHome                  | [package].prefixed      |
+| Suffixed      | HomeIcon                    | [package].suffixed      |

docs/guide/packages/lucide-svelte.md

@@ -7,7 +7,7 @@ Implementation of the lucide icon library for svelte applications.
 ::: code-group
 
 ```sh [pnpm]
-pnpm install lucide-svelte
+pnpm add lucide-svelte
 ```
 
 ```sh [yarn]
@@ -87,54 +87,95 @@ The package includes type definitions for all icons. This is useful if you want
 
 ### TypeScript Example
 
+#### Svelte 4
+
 ```svelte
 <script lang="ts">
-  import Home from 'lucide-svelte/icons/home';
-  import Library from 'lucide-svelte/icons/library';
-  import Cog from 'lucide-svelte/icons/cog';
-  import type { ComponentType } from 'svelte';
-  import type { Icon } from 'lucide-svelte';
-
-  type MenuItem = {
-    name: string;
-    href: string;
-    icon: ComponentType<Icon>;
-  }
-
-  const menuItems: MenuItem[] = [
-    {
-      name: 'Home',
-      href: '/',
-      icon: Home,
-    },
-    {
-      name: 'Blog',
-      href: '/blog',
-      icon: Library,
-    },
-    {
-      name: 'Projects',
-      href: '/projects',
-      icon: Cog,
-    }
-  ];
+	import { Home, Library, Cog, type Icon } from 'lucide-svelte';
+	import type { ComponentType } from 'svelte';
+
+	type MenuItem = {
+		name: string;
+		href: string;
+		icon: ComponentType<Icon>;
+	};
+
+	const menuItems: MenuItem[] = [
+		{
+			name: 'Home',
+			href: '/',
+			icon: Home
+		},
+		{
+			name: 'Blog',
+			href: '/blog',
+			icon: Library
+		},
+		{
+			name: 'Projects',
+			href: '/projects',
+			icon: Cog
+		}
+	];
 </script>
 
 {#each menuItems as item}
-  <a href={item.href}>
-   <svelte:component this={item.icon} />
-    <span>{item.name}</span>
-  </a>
+	<a href={item.href}>
+		<svelte:component this={item.icon} />
+		<span>{item.name}</span>
+	</a>
+{/each}
+```
+
+
+#### Svelte 5
+Some changes are required since Svelte 5 [deprecates](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes-Component-typing-changes) the `ComponentType` typescript type.
+
+```svelte
+<script lang="ts">
+	import { Home, Library, Cog, type Icon as IconType } from 'lucide-svelte';
+
+	type MenuItem = {
+		name: string;
+		href: string;
+		icon: typeof IconType;
+	};
+
+	const menuItems: MenuItem[] = [
+		{
+			name: 'Home',
+			href: '/',
+			icon: Home
+		},
+		{
+			name: 'Blog',
+			href: '/blog',
+			icon: Library
+		},
+		{
+			name: 'Projects',
+			href: '/projects',
+			icon: Cog
+		}
+	];
+</script>
+
+{#each menuItems as item}
+	{@const Icon = item.icon}
+	<a href={item.href}>
+		<Icon />
+		<span>{item.name}</span>
+	</a>
 {/each}
 ```
 
 ### JSDoc Example
 
+#### Svelte 4
+
 ```svelte
 <script>
-  import Home from 'lucide-svelte/icons/home';
-  import Library from 'lucide-svelte/icons/library';
-  import Cog from 'lucide-svelte/icons/cog';
+  import { Home, Library, Cog } from 'lucide-svelte';
 
   /**
    * @typedef {Object} MenuItem
@@ -162,6 +203,57 @@ The package includes type definitions for all icons. This is useful if you want
     }
   ];
 </script>
+
+{#each menuItems as item}
+  <a href={item.href}>
+   <svelte:component this={item.icon} />
+    <span>{item.name}</span>
+  </a>
+{/each}
+```
+
+
+#### Svelte 5
+
+```svelte
+<script>
+	import { Home, Library, Cog } from 'lucide-svelte';
+
+	/**
+	 * @typedef {Object} MenuItem
+	 * @property {string} name
+	 * @property {string} href
+	 * @property {typeof import('lucide-svelte').Icon} icon
+	 */
+
+	/** @type {MenuItem[]} */
+	const menuItems = [
+		{
+			name: 'Home',
+			href: '/',
+			icon: Home
+		},
+		{
+			name: 'Blog',
+			href: '/blog',
+			icon: Library
+		},
+		{
+			name: 'Projects',
+			href: '/projects',
+			icon: Cog
+		}
+	];
+</script>
+
+{#each menuItems as item}
+	{@const Icon = item.icon}
+	<a href={item.href}>
+		<Icon />
+		<span>{item.name}</span>
+	</a>
+{/each}
+
 ```
 
 For more details about typing the `svelte:component` directive, see the [Svelte documentation](https://svelte.dev/docs/typescript#types-componenttype).
@@ -197,13 +289,28 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
 
 ### Icon Component Example
 
+#### Svelte 4
+
 ```svelte
 <script>
   import * as icons from 'lucide-svelte';
   export let name;
 </script>
 
-<svelte:component this="{icons[name]}" {...$$props} />
+<svelte:component this={icons[name]} {...$$props} />
+```
+
+#### Svelte 5
+
+```svelte
+<script>
+	import * as icons from 'lucide-svelte';
+	let { name } = $props();
+
+	const Icon = icons[name];
+</script>
+
+<Icon {...props} />
 ```
 
 #### Using the Icon Component

icons/bath.json

@@ -2,7 +2,8 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "karsa-mistmere",
-    "ericfennis"
+    "ericfennis",
+    "jamiemlaw"
   ],
   "tags": [
     "amenities",