Appunti Angular 17

Icone da Lucide.dev

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>


icone svg

Si devono inserire nella cartella public e poi si possono usari nei vari componenti

Esempio:
pesce