[Angular] Standalone component compatibility

[hakimio]

[Angular] Standalone component compatibility

[karsa-mistmere]

How about decoupling the core icon package and the Angular package to make life easier?

It's planned, see #1687

Once we do that, there will be nothing in the way of releasing a modern version of lucide-angular with proper standalone component support.

[hakimio]

How about decoupling the core icon package and the Angular package to make life easier?

[karsa-mistmere]

Hi @hakimio,

This isn't really an issue with lucide-angular, this is just how Angular works. Standalone components have no support for ModuleWithProvider declarations, if you want to use Lucide with standalone components, you already can do it, see: #1288 (comment)

Of course it would be best if we could provide a standalone component, but we can't as long as we want to retain backwards compatibility with previous versions.

Due to performance reasons I also highly advise against injecting a list of icons within every standalone component and relying instead of tree-shaken single imports (basically: only provide icons to a standalone component that the component actually uses).

[hakimio]

Using importProvidersFrom() is not a proper solution. That's just a workaround.
You can provide your own provideLucideIcons(appIcons) at least in addition to LucideAngularModule.pick(). It wouldn't break anything.

[hakimio]

Also, you can release a new major version of lucide-angular with breaking changes. I don't understand why in more than 3 years you haven't released any major version and kept going with 0.x releases.

[hakimio]

makeEnvironmentProviders is available since Angular v15. Older Angular versions are not supported.

[karsa-mistmere]

Using importProvidersFrom() is not a proper solution. That's just a workaround. You can provide your own provideLucideIcons(appIcons) at least in addition to LucideAngularModule.pick(). It wouldn't break anything.

importProvidersFrom is not something that we recommend using at all, we recommend using the dedicated injection token for this purpose as stated in #1288 (comment)

But even moreso we recommend not providing more icons than necessary, so I'd recommend using this pattern:

import { Component } from '@angular/core';
import { ActivitySquareIcon, LucideAngularModule } from 'lucide-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [LucideAngularModule],
  template: `<lucide-icon [name]="ActivitySquareIcon" />`,
})
export class DemoComponent {
  protected readonly ActivitySquareIcon = ActivitySquareIcon;
}

Also, you can release a new major version of lucide-angular with breaking changes.

Every icon is bundled within the package, should we release a new version with breaking changes, people using earlier versions of Angular would be hung out to dry, and if you look at the usage statistics of major versions, people do still use earlier versions, a lot: https://www.npmjs.com/package/@angular/core?activeTab=versions.

[hakimio]

Awesome 🙂