Comment utiliser les icônes SVG dans Angular

Les icônes SVG vous permettent d’ajouter des icônes à votre code sans importer de bibliothèques de polices complexes. Voici comment créer une icône SVG réutilisable en créant d’abord un composant SVG.

Qu’est-ce que SVG ?

SVG, ou Scalable Vector Graphics, est un format de fichier basé sur XML permettant de décrire des graphiques vectoriels bidimensionnels. Ils sont évolutifs, parfaits pour les navigateurs Web, plus petits que la plupart des autres images graphiques et stylés avec CSS. Il est préférable de les utiliser pour des icônes polyvalentes, et non pour des images photographiques 4K.

Vous les verrez souvent avoir une extension de fichier de .svgbien qu’ils soient généralement collés directement dans une page HTML car leur format XML est facilement compatible avec HTML.

Obtenez des icônes SVG

Le vent arrière pousse le Icônes de héros site web. Cependant, assurez-vous d’installer Vent arrière pour angulaire d’abord.

Sinon, il existe une pléthore d’icônes SVG disponibles partout. Lancez simplement une fléchette sur Google avec SVG quelque part dans le terme de recherche, ou créez le vôtre dans Adobe ou dans n’importe quel programme d’image.

Création d’un composant SVG

Pour créer un composant SVG, créez simplement un composant régulier en angulaire ng g c svg-component. Vous pouvez nommer votre composant comme n’importe quel autre nom svg-component. Vous avez également la possibilité de renommer le fichier HTML en .svg. Assurez-vous de modifier le templateUrl aussi:

import { Component } from '@angular/core';

@Component({
  selector: 'app-svg',
  // update file extension here... <-----
  templateUrl: './svg.component.svg',
  styleUrls: ['./svg.component.css']
})
export class SvgComponent {
   ...
}

Cela vient du Exemple SVG angulaire. Cependant, je préfère utiliser Tailwind pour le style et rester simple.

Composant SVG simple

Créez d’abord un composant SVG simple en utilisant :

ng g c svg --inline-style=true --inline-template=true

Vous pouvez bien sûr créer l’ensemble de votre projet de cette façon :

ng new svg-project --inline-style=true --inline-template=true

Je me débarrasse également du styles option puisque nous utilisons Tailwind.

import { Component } from '@angular/core';

@Component({
  selector: 'app-svg',
  template: ``
})
export class SvgComponent { }

Nous pouvons créer une icône SVG réutilisable en collant le composant SVG à l’intérieur du modèle. On peut aussi créer une classe Saisir variable qui peut être réutilisée pour le style Tailwind. Cet exemple utilise simplement le building-office icône.

Décorateur d’entrée

@Input() class="";

Lier la classe

<svg ... [class]="class" ... >

Code final

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-svg',
  template: `
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      [class]="class"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"
      />
    </svg>
  `
})
export class SvgComponent {
  @Input() class="";
}

Nous pouvons désormais utiliser et réutiliser l’icône partout où le composant est importé dans un composant ou un module autonome, et ajouter le style approprié (Tardis, ça vous tente ?) :

<app-svg class="w-8 h-8 bg-sky-800 text-white" />

Dernières pensées

Les icônes SVG ne sont qu’un moyen simple d’ajouter des icônes à votre code sans importer de bibliothèques de polices complexes comme Icônes matérielles. Ils peuvent être personnalisés avec CSS et peuvent réduire votre temps de développement de quelques heures. Utilisez-les certainement dans vos applications angulaires.

Vous utilisez l’interface utilisateur Kendo pour Angular ?

Le nouveau Icône SVG angulaire composant de Progress Interface utilisateur Kendo pour angulaire rend le processus de création d’icônes SVG super simple, PLUS est déjà livré avec 500+ Icônes SVG. Voir la démo du composant.

Et si vous n’utilisez pas déjà Kendo UI pour Angular, il est livré avec un essai gratuit de 30 jours. Vérifiez-le:

Essayez Kendo UI pour Angular