diff --git a/.github/ISSUE_TEMPLATE/02_bug_report.yml b/.github/ISSUE_TEMPLATE/02_bug_report.yml index b486650a5..f5d8918bb 100644 --- a/.github/ISSUE_TEMPLATE/02_bug_report.yml +++ b/.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 diff --git a/.github/ISSUE_TEMPLATE/04_feature_request.yml b/.github/ISSUE_TEMPLATE/04_feature_request.yml index 1431faa2c..73d354ac8 100644 --- a/.github/ISSUE_TEMPLATE/04_feature_request.yml +++ b/.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 diff --git a/.github/labeler.yml b/.github/labeler.yml index 57607e502..aeb274b50 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -52,15 +52,13 @@ 💎 vue package: - changed-files: - any-glob-to-any-file: - - 'packages/lucide-vue/*' - - 'packages/lucide-vue-next/*' + - 'packages/vue/*' # 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/*' diff --git a/.prettierignore b/.prettierignore index d60d00b9b..435726b81 100644 --- a/.prettierignore +++ b/.prettierignore @@ -7,8 +7,8 @@ docs/.vitepress/cache docs/.vitepress/data docs/.nitro -# lucide-angular -packages/lucide-angular/.angular/cache +# @lucide/angular +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/lucide-svelte/.svelte-kit +packages/svelte/src/icons/*.svelte +packages/svelte/.svelte-kit diff --git a/docs/guide/index.md b/docs/guide/index.md index 3c3dcd2d8..23d43cc29 100644 --- a/docs/guide/index.md +++ b/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 diff --git a/docs/guide/packages/lucide-angular.md b/docs/guide/packages/lucide-angular.md deleted file mode 100644 index 136562143..000000000 --- a/docs/guide/packages/lucide-angular.md +++ /dev/null @@ -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 - - - - -``` -for standalone -```html - - - - -``` - -### 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 - -``` - -### 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 - -``` - -For best practices on accessibility, please see our [accessibility guide](../accessibility.md). diff --git a/docs/guide/packages/lucide-vue.md b/docs/guide/packages/lucide-vue.md index e67cb9835..f5ac0ff10 100644 --- a/docs/guide/packages/lucide-vue.md +++ b/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