如何在独立式Angular应用中引入lucide-angular？

问题原因 #

你之前使用的LucideAngularModule.pick()是为NgModule模式设计的API，独立组件无法直接导入这类传统NgModule，因此会报错。

正确实现方式 #

lucide-angular支持独立组件模式，你需要直接导入单个图标对应的独立组件，而非通过模块导入：

1. 导入单个图标组件
   从lucide-angular/icons路径导入需要的图标（比如Home），而非从lucide-angular导入模块：

   import { Component } from '@angular/core';
   import { RouterOutlet } from '@angular/router';
   import { NgClass, NgOptimizedImage } from '@angular/common';
   import { cx } from 'class-variance-authority';
   // 直接导入具体图标组件
   import { Home } from 'lucide-angular/icons';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     // 在imports数组中添加图标组件
     imports: [RouterOutlet, NgOptimizedImage, NgClass, Home],
     templateUrl: './app.component.html',
     styleUrl: './app.component.css',
   })
   export class AppComponent {
     title = 'tasko';
     protected readonly cx = cx;
   }
   

2. 在模板中使用图标
   直接使用图标对应的组件标签（格式为[图标名小写]-icon），还可以通过属性自定义样式：

   <!-- 基础使用 -->
   <home-icon></home-icon>
   
   <!-- 自定义尺寸、颜色 -->
   <home-icon size="24" color="#2563eb" strokeWidth="2"></home-icon>
   

多图标场景 #

如果需要使用多个图标，只需依次导入并添加到imports数组即可：

import { Home, Search, Menu } from 'lucide-angular/icons';

@Component({
  // ...其他配置
  imports: [RouterOutlet, NgOptimizedImage, NgClass, Home, Search, Menu],
})

模板中对应使用<search-icon>、<menu-icon>等标签。

内容的提问来源于stack exchange，提问作者Mohammad Reza Ghasemi