Intégrer des icônes SVG avec Angular Material

 

Angular Material, une bibliothèque d'UI pour Angular, offre une panoplie d'éléments visuels prêts à l'emploi, incluant des icônes. Les icônes SVG, sont des images vectorielles extensibles. Elles offrent une flexibilité et une netteté visuelle exceptionnelle, et leur utilisation avec Angular Material peut être réalisée de manière transparente. Même si Angular Material propose par défaut une bonne collection d'icone (liste ici), il peut être utile d'ajouter ses propres icones

Dans ce guide, nous allons voir les étapes pour intégrer et utiliser nos icônes SVG avec Angular Material.

 

Étape 1 : Installation d'Angular Material

Assurez-vous d'avoir Angular Material installé dans votre projet Angular. Si ce n'est pas déjà fait, utilisez Angular CLI pour ajouter Angular Material :

ng add @angular/material
 

Étape 2 : Intégration des icônes SVG

Placez vos fichiers SVG dans un répertoire approprié de votre projet, par exemple, dans  assets/icons.

Étape 3 : Création d'un module pour la configuration des icônes

Lors de l'intégration d'icônes SVG avec Angular Material, séparer la configuration des icônes dans un module dédié peut rendre votre code plus modulaire et maintenable. 

Créez un nouveau fichier, par exemple icon-config.module.ts, pour gérer la configuration des icônes. N'oubliez pas d'importer MatIconModule.

import { NgModule } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@NgModule({
  imports: [MatIconModule],
})
export class IconConfigModule {
  constructor(
      private matIconRegistry: MatIconRegistry,
      private domSanitizer: DomSanitizer) {
    // Ajoutez ici la configuration de vos icônes SVG
    this.matIconRegistry 
           .addSvgIcon('nom_de_votre_icone1',this.setPath(`${this.path}/chemin_vers_votre_icone1.svg`))
           .addSvgIcon('nom_de_votre_icone2',this.setPath(`${this.path}/chemin_vers_votre_icone2.svg`));
  } 

  private setPath(url: string): SafeResourceUrl {
      return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

 

Étape 4 : Intégration du module dans votre application

Dans votre module principal (app.module.ts), importez et utilisez IconConfigModule :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IconConfigModule } from './icon-config.module'; // Chemin vers votre module d'icônes

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IconConfigModule,
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
  // ...
}

Étape 5 : Utilisation des icônes SVG

Une fois la configuration effectuée, utilisez les icônes SVG dans votre application avec <mat-icon>.

 <mat-icon svgIcon="nom_de_votre_icone"></mat-icon>

Conclusion

En suivant ces étapes, vous pouvez intégrer facilement des icônes SVG dans votre application Angular utilisant Angular Material, offrant ainsi une interface utilisateur esthétique et personnalisée.

 

Design Pattern Composite : exemple C#

 Voila un exemple simple en C# pour illustrer le pattern composite.

Diagramme UML

Les sources

La classe Forme

abstract class Forme
{
    protected string nom;

    public Forme(string nom)
    {
        this.nom = nom;
    }

    public virtual void Ajouter(Forme f)
    {
        throw new NotImplementedException();
    }

    public virtual void Retirer(Forme f)
    {
        throw new NotImplementedException();
    }

    public virtual void Afficher(int profondeur)
    {
        Console.WriteLine(new string('-', profondeur) + nom);
    }

    public abstract double CalculerAire();
}

La classe Carre

class Carre : Forme
{
    private double cote;

    public Carre(string nom, double cote) : base(nom)
    {
        this.cote = cote;
    }

    public override double CalculerAire()
    {
        return cote * cote;
    }
}

La classe Cercle

class Cercle : Forme
{
    private double rayon;

    public Cercle(string nom, double rayon) : base(nom)
    {
        this.rayon = rayon;
    }

    public override double CalculerAire()
    {
        return Math.PI * rayon * rayon;
    }
}

La classe Composite

class Composite : Forme
{
    private List<Forme> enfants = new List<Forme>();

    public Composite(string nom) : base(nom)
    {
    }

    public override void Ajouter(Forme f)
    {
        enfants.Add(f);
    }

    public override void Retirer(Forme f)
    {
        enfants.Remove(f);
    }

    public override void Afficher(int profondeur)
    {
        Console.WriteLine(new string('-', profondeur) + "+ " + nom);

        foreach (Forme enfant in enfants)
        {
            enfant.Afficher(profondeur + 2);
        }
    }

    public override double CalculerAire()
    {
        double aire = 0;

        foreach (Forme enfant in enfants)
        {
            aire += enfant.CalculerAire();
        }

        return aire;
    }
}

 Exemple d'utilisation :

static void Main(string[] args)
{
    Composite groupe1 = new Composite("Groupe 1");
    groupe1.Ajouter(new Cercle("Cercle 1", 3));
    groupe1.Ajouter(new Carre("Carre 1", 4));
    groupe1.Ajouter(new Carre("Carre 2", 5));

    Composite groupe2 = new Composite("Groupe 2");
    groupe2.Ajouter(new Cercle("Cercle 2", 2));
    groupe2.Ajouter(new Carre("Carre 3", 3));
    groupe2.Ajouter(groupe1);

    groupe2.Afficher(0);

    Console.WriteLine("Aire totale : " + groupe2.CalculerAire());
}