afroicons-angular

Les icônes Afroicons pour Angular (18 et plus) : un composant autonome <afroicon>, les 585 icônes culturelles (au trait et remplies, dont les cartes des 54 pays et 42 monnaies), les 56 drapeaux (54 pays, l'Union africaine et le panafricain), les 483 emojis et les 1810 icônes d'interface (noms Lucide, comme afroicons-ui).

npm install afroicons-angular

Application autonome (standalone)

Déclarez les icônes que vous utilisez, puis appelez-les par leur nom :

// main.ts
import { bootstrapApplication } from "@angular/platform-browser";
import { provideAfroicons, Baobab, Mototaxi, Wallet } from "afroicons-angular";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {
  providers: [provideAfroicons({ Baobab, Mototaxi, Wallet })],
});

// app.component.ts
import { Component } from "@angular/core";
import { AfroiconComponent } from "afroicons-angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [AfroiconComponent],
  template: `
    <afroicon name="baobab" />
    <afroicon name="mototaxi" [size]="32" color="#C24E2A" title="Livraison" />
    <afroicon name="Wallet" [strokeWidth]="2" />
  `,
})
export class AppComponent {}

Seules les icônes déclarées entrent dans votre bundle. provideAfroicons(afroicons) les déclare toutes, au prix d'environ 2 Mo (340 Ko gzip) : réservez-le aux prototypes.

Sans registre

Passez l'icône elle-même avec [icon] :

import { AfroiconComponent, Djembe } from "afroicons-angular";

@Component({
  standalone: true,
  imports: [AfroiconComponent],
  template: `<afroicon [icon]="djembe" [size]="24" />`,
})
export class DrumComponent { djembe = Djembe; }

Avec un NgModule

Le composant est autonome : importez-le directement dans votre module.

import { NgModule } from "@angular/core";
import { AfroiconComponent, provideAfroicons, Baobab } from "afroicons-angular";

@NgModule({
  imports: [AfroiconComponent],
  providers: [provideAfroicons({ Baobab })],
})
export class SharedModule {}

Propriétés

| Propriété | Défaut | Rôle | | --- | --- | --- | | name | | Id Afroicons (baobab, mototaxi) ou nom Lucide (Wallet, CheckCircle2). La casse, les tirets et les _ sont ignorés. | | icon | | L'icône importée, à la place de name. | | size | 24 | Largeur et hauteur. | | color | currentColor | Couleur du trait : par défaut, celle du texte. | | strokeWidth | 1.75 | Épaisseur du trait. | | absoluteStrokeWidth | false | Garde la même épaisseur visuelle quelle que soit la taille. | | title | | Texte alternatif. Sans titre, l'icône est décorative (aria-hidden). | | variant | line | fill pour la version remplie (icônes culturelles). Sans version remplie, l'icône reste au trait. | | tone | medium-dark | Teinte de peau des emojis qui en ont une : light, medium-light, medium, medium-dark, dark. |

Noms des icônes : l'id Afroicons en PascalCase pour les icônes culturelles (Baobab, Peigneafro, Taxibrousse), le nom Lucide pour les icônes d'interface (Wallet, ShoppingCart). Quand une icône culturelle porte déjà ce nom, l'icône d'interface prend le suffixe Icon : RadioIcon (name="radio-icon"), car Radio est le poste de radio culturel. La liste complète est sur afroicons.org.

Le SVG est construit élément par élément, sans innerHTML, et fonctionne avec le rendu serveur (SSR).

Licence MIT © THAFAM HOLDING SARL et les contributeurs d'Afroicons.