feat(packages/angular): add new @lucide/angular package (#3897)

* Add new lucide angular package * feat(packages/angular): added initial @lucide/angular package * feat(packages/angular): update readme * feat(packages/angular): update angular.json * docs(packages/angular): added (for now) full documentation for @lucide/angular * docs(packages/angular): added migration guide from lucide-angular * fix(github): fix package label syntax 😅 * fix(lint): fix linting issues * fix(github/angular): add prebuild stage * fix(github/angular): add prebuild stage & fix tests * fix(github/angular): fix LucideIconComponentType, update with _real_ public members * fix(github/angular): add prebuild to build step manually * fix(github/angular): downgrade vitest * fix(packages/angular): fix migration guide code example * fix(packages): add vitest + @vitest/* to pnpm overrides * fix(packages): update pnpm-lock with merged version * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * fix(packages): fix aria-hidden logic * fix(packages): update pnpm-lock * fix(packages): extract vitest and jsdom to root devDependencies * Fix copy utils script * Format code * feat(packages/angular): switched to self-describing IconData object from separate node+name – no more toKebabCase hackery feat(packages/angular): renamed LucideIconComponentType => LucideIcon, and LucideIcon => LucideDynamicIcon feat(packages/angular): added backwards compatible CSS class support feat(packages/angular): switched to vector-effect: non-scaling-stroke implementation from computed stroke width feat(packages/angular): rewrote icon provider to only accept a list of self-described icons – no more toKebabCase hackery & as an added bonus automatic backwards compatible alias support 🚀 feat(packages/angular): added legacy icon node helper function for passing legacy icons to providers test(packages/angular): added unit tests on LUCIDE_CONFIG provider usage * fix(packages/angular): fix linting issues * feat(packages/angular): extract createLucideIcon logic into helper function, refactor export template to use the iconData object as defined in ExportTemplate * Replace author * Remove private field * fix(packages/angular): remove createLucideIcon, it breaks the package :'( * fix(packages/angular): fix rendering order of child elements (_before_ projected content) * Format package.json * Update docs/guide/packages/angular.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update packages/angular/MIGRATION.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2026-11-14 13:58:21 +00:00 · 2026-03-20 15:31:34 +01:00
parent d4424888de
commit a0e202d759
54 changed files with 6672 additions and 462 deletions
@@ -0,0 +1,72 @@
+import base64SVG from '@lucide/build-icons/utils/base64SVG';
+import defineExportTemplate from '@lucide/build-icons/utils/defineExportTemplate';
+import { toPascalCase } from '@lucide/helpers';
+
+export default defineExportTemplate(async ({
+  componentName,
+  iconName,
+  getSvg,
+  deprecated,
+  deprecationReason,
+  iconData,
+}) => {
+  const svgContents = await getSvg();
+  const svgBase64 = base64SVG(svgContents);
+  const angularComponentName = `Lucide${componentName}`;
+  const selectors = [`svg[lucide${toPascalCase(iconName)}]`];
+  const aliasComponentNames: string[] = [];
+  for (const alias of iconData.aliases ?? []) {
+    const aliasComponentName = `Lucide${toPascalCase(alias)}`;
+    const aliasSelector = `svg[lucide${toPascalCase(alias)}]`;
+    if (!selectors.includes(aliasSelector)) {
+      selectors.push(aliasSelector);
+    }
+    if (aliasComponentName !== angularComponentName && !aliasComponentNames.includes(aliasComponentName)) {
+      aliasComponentNames.push(aliasComponentName);
+    }
+  }
+
+  return `\
+import { LucideIconBase } from '../lucide-icon-base';
+import { lucideIconTemplate } from '../lucide-icon-template';
+import { LucideIconData } from '../types';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  signal,
+} from '@angular/core';
+
+/**
+ * @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/angular - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
+*/
+@Component({
+  selector: '${selectors.join(', ')}',
+  template: lucideIconTemplate,
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ${angularComponentName} extends LucideIconBase {
+  static readonly icon: LucideIconData = ${JSON.stringify(iconData)};
+  protected override readonly icon = signal(${angularComponentName}.icon);
+}
+
+${aliasComponentNames.map((aliasComponentName) => {
+    return `
+/**
+ * @deprecated
+ * @see ${angularComponentName}
+ */
+export const ${aliasComponentName} = ${angularComponentName};
+`;
+  }).join(`\n\n`)}
+`;
+});