chore(repo): Update issue templates and documentation for package ren… (#4379)

* chore(repo): Update issue templates and documentation for package renaming and deprecations

* Format code

* Remove flutter label

* Format code

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -13,21 +13,19 @@ body:
       description: Which Lucide packages are affected? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
-        - label: lucide-flutter
-        - label: lucide-preact
         - label: lucide-react
+        - label: '@lucide/vue'
+        - label: '@lucide/svelte'
+        - label: '@lucide/angular'
+        - label: '@lucide/astro'
         - label: lucide-react-native
+        - label: lucide-preact
         - label: lucide-solid
         - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: '@lucide/svelte (new version)'
-        - label: lucide-vue
-        - label: lucide-vue-next
-        - label: lucide-astro
         - label: '@lucide/icons'
+        - label: lucide-vue-next (deprecated)
+        - label: lucide-svelte (deprecated)
+        - label: lucide-angular (deprecated)
         - label: Figma plugin
         - label: source/main
         - label: other/not relevant
@@ -38,7 +36,7 @@ body:
     attributes:
       label: Version
       description: What version of Lucide are you running?
-      placeholder: e.g. 0.289.1
+      placeholder: e.g. 1.1.0
     validations:
       required: true
   - type: checkboxes

.github/ISSUE_TEMPLATE/04_feature_request.yml

@@ -13,21 +13,19 @@ body:
       description: Which Lucide project do you wish this feature were added to? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
-        - label: lucide-flutter
-        - label: lucide-preact
         - label: lucide-react
+        - label: '@lucide/vue'
+        - label: '@lucide/svelte'
+        - label: '@lucide/angular'
+        - label: '@lucide/astro'
         - label: lucide-react-native
+        - label: lucide-preact
         - label: lucide-solid
         - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: '@lucide/svelte (new version)'
-        - label: lucide-vue
-        - label: lucide-vue-next
-        - label: lucide-astro
         - label: '@lucide/icons'
+        - label: lucide-vue-next (deprecated)
+        - label: lucide-svelte (deprecated)
+        - label: lucide-angular (deprecated)
         - label: Figma plugin
         - label: all JS packages
         - label: site

.github/labeler.yml

@@ -52,15 +52,13 @@
 💎 vue package:
   - changed-files:
       - any-glob-to-any-file:
-          - 'packages/lucide-vue/*'
+          - 'packages/vue/*'
-          - 'packages/lucide-vue-next/*'
 
 # For changes in the Lucide angular package
 🅰️ angular package:
   - changed-files:
       - any-glob-to-any-file:
           - 'packages/angular/*'
-          - 'packages/lucide-angular/*'
 
 # For changes in the Lucide preact package
 ⚛️ preact package:
@@ -72,7 +70,7 @@
 🧣 svelte package:
   - changed-files:
       - any-glob-to-any-file:
-          - 'packages/lucide-svelte/*'
+          - 'packages/svelte/*'
 
 # For changes in the Lucide solid package
 🪝 solid package:
@@ -97,9 +95,3 @@
   - changed-files:
       - any-glob-to-any-file:
           - 'packages/lucide-static/*'
-
-# For changes in the Lucide flutter package
-🏹 flutter package:
-  - changed-files:
-      - any-glob-to-any-file:
-          - 'packages/lucide-flutter/*'

.prettierignore

@@ -7,8 +7,8 @@ docs/.vitepress/cache
 docs/.vitepress/data
 docs/.nitro
 
-# lucide-angular
+# @lucide/angular
-packages/lucide-angular/.angular/cache
+packages/angular/.angular
 
 # lucide-static
 packages/lucide-static/icons
@@ -20,5 +20,5 @@ packages/lucide-static/font
 packages/svelte/.svelte-kit
 
 # lucide-svelte
-packages/lucide-svelte/src/icons/*.svelte
+packages/svelte/src/icons/*.svelte
-packages/lucide-svelte/.svelte-kit
+packages/svelte/.svelte-kit

docs/guide/index.md

@@ -30,7 +30,7 @@ However, not everyone can understand them easily. Read more about [how to use Lu
 
 ## Official Packages
 
-Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
+Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](./lucide/index.md), [React](./react/index.md), [React Native](./react-native/index.md), [Vue](./vue/index.md), [Svelte](./svelte/index.md), [Preact](./preact/index.md), [Solid](./solid/index.md), [Angular](./angular/index.md), [Astro](./astro/index.md), and [Static](./static/index.md).
 
 ## Community
 

docs/guide/packages/lucide-angular.md

@@ -1,187 +0,0 @@
-# Lucide Angular
-
-::: warning
-This documentation is for our legacy package for Angular.
-
-For our modern, standalone-first implementation, please refer to [`@lucide/angular`](./angular).
-:::
-
-Angular components and services for Lucide icons that integrate with Angular's dependency injection and component system. Provides both traditional module-based and modern standalone component approaches for maximum flexibility in Angular applications.
-
-**What you can accomplish:**
-- Use icons as Angular components with full dependency injection support
-- Configure icons globally through Angular services and providers
-- Choose from multiple component selectors (lucide-angular, lucide-icon, i-lucide, span-lucide)
-- Integrate with Angular's reactive forms and data binding
-- Build scalable applications with tree-shaken icon bundles and lazy loading support
-
-## Installation
-
-::: code-group
-
-```sh [pnpm]
-pnpm add lucide-angular
-```
-
-```sh [yarn]
-yarn add lucide-angular
-```
-
-```sh [npm]
-npm install lucide-angular
-```
-
-```sh [bun]
-bun add lucide-angular
-```
-
-:::
-
-## How to use
-
-### Step 1: Import `LucideAngularModule`
-
-In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use:
-
-```js
-import { LucideAngularModule, File, House, Menu, UserCheck } from 'lucide-angular';
-
-@NgModule({
-  imports: [
-    LucideAngularModule.pick({File, House, Menu, UserCheck})
-  ]
-})
-export class AppModule { }
-```
-
-or using standalone version:
-
-```js
-import { Component } from '@angular/core';
-import { LucideAngularModule, FileIcon } from 'lucide-angular';
-
-@Component({
-  standalone: true,
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss',
-  imports: [LucideAngularModule]
-})
-export class AppComponent {
-  readonly FileIcon = FileIcon;
-}
-```
-### Step 2: Use the icons in templates
-
-Within your templates you may now use one of the following component tags to insert an icon:
-
-```html
-<lucide-angular name="file" class="my-icon"></lucide-angular>
-<lucide-icon name="house" class="my-icon"></lucide-icon>
-<i-lucide name="menu" class="my-icon"></i-lucide>
-<span-lucide name="user-check" class="my-icon"></span-lucide>
-```
-for standalone
-```html
-<lucide-angular [img]="FileIcon" class="my-icon"></lucide-angular>
-<lucide-icon [img]="FileIcon" class="my-icon"></lucide-icon>
-<i-lucide [img]="FileIcon" class="my-icon"></i-lucide>
-<span-lucide [img]="FileIcon" class="my-icon"></span-lucide>
-```
-
-### Props
-
-You can pass additional props to adjust the icon appearance.
-
-| name                  | type      | default      |
-| --------------------- | --------- | ------------ |
-| `size`                | *number*  | 24           |
-| `color`               | *string*  | currentColor |
-| `strokeWidth`         | *number*  | 2            |
-| `absoluteStrokeWidth` | *boolean* | false        |
-
-```html
-<i-lucide name="house" [size]="48" color="red" [strokeWidth]="1"></i-lucide>
-```
-
-### Global configuration
-
-You can inject the `LucideIconConfig` service in your root component to globally configure the default property values as defined above.
-
-### Styling using a custom CSS class
-
-Any extra HTML attribute is ignored, but the `class` attribute
-is passed onto the internal SVG image element and it can be used to style it:
-
-```css
-svg.my-icon {
-    width: 12px;
-    height: 12px;
-    stroke-width: 3;
-}
-```
-
-## Injecting multiple icon providers
-
-You may provide additional icons using the `LUCIDE_ICONS` injection token,
-which accepts multiple providers of the interface `LucideIconsProviderInterface`
-with the utility class `LucideIconsProvider` available for easier usage:
-
-```js
-import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
-import { MyIcon } from './icons/my-icon';
-
-const myIcons = {MyIcon};
-
-@NgModule({
-  providers: [
-    {provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)},
-  ]
-})
-export class AppModule { }
-```
-
-To add custom icons, you will first need to convert them to an [svgson format](https://github.com/elrumordelaluz/svgson).
-
-## Loading all icons
-
-::: danger
-You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.
-:::
-
-```js
-import { icons } from 'lucide-angular';
-
-...
-
-LucideAngularModule.pick(icons)
-```
-
-## With Lucide Lab or custom icons
-
-[Lucide Lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
-They can be used in the same way as the official icons.
-
-```js
-import { LucideAngularModule } from 'lucide-angular';
-import { coconut } from '@lucide/lab';
-
-@NgModule({
-  imports: [
-    LucideAngularModule.pick({ coconut })
-  ]
-})
-export class AppModule { }
-```
-
-## Accessibility
-
-By default, we hide icons from screen readers using `aria-hidden="true"`.
-
-You can add accessibility attributes using aria-labels.
-
-```html
-<lucide-icon name="check" aria-label="Task completed"></lucide-icon>
-```
-
-For best practices on accessibility, please see our [accessibility guide](../accessibility.md).

docs/guide/packages/lucide-vue.md

@@ -3,6 +3,7 @@
 Vue 2 components for Lucide icons that integrate with Vue's Options API and template system. Each icon is a Vue component that renders as an inline SVG, providing familiar Vue development patterns for legacy applications still using Vue 2.
 
 **What you can accomplish:**
+
 - Use icons as Vue 2 components with Options API integration
 - Maintain legacy Vue 2 applications with modern icon components
 - Integrate with Vue 2's template system and component lifecycle
@@ -155,7 +156,7 @@ You can add accessibility attributes using aria-labels.
 
 ```vue
 <script setup>
-import { Check } from 'lucide-vue-next';
+import { Check } from '@lucide/vue';
 </script>
 
 <template>