Implementazione della libreria di icone Lucide:
npm install lucide-angular
Uso:
Nel file ts importare LucideAngularModule seguito dal nome delle icone.
import { Component } from '@angular/core';
import { LucideAngularModule, FileIcon, EyeIcon } 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;
readonly EyeIcon = EyeIcon;
}
Nel file html:
<lucide-angular [img]="FileIcon" class="my-icon"></lucide-angular>
<lucide-angular [img]="EyeIcon" class="my-icon"></lucide-angular>
È possibile passare oggetti aggiuntivi per regolare l'aspetto dell'icona.
size default: 24
color default: quello corrente
strokeWidth default 2 (spessore del bordo)
Esempio:
<lucide-angular [img]="EyeIcon" class="my-icon" [size]="48" color="red" [strokeWidth]="1"></lucide-angular>
Si devono inserire nella cartella public e poi si possono usari nei vari componenti
Esempio: