ngx bootstrap icons

ngx-bootstrap-icons

Ce module angulaire vous permet d'utiliser les icônes bootstrap dans votre application angulaire sans dépendances supplémentaires.

npm i ngx-bootstrap-icons --save

Démo

Démo ici

Usage

1. Installez le package

npm i ngx-bootstrap-icons --save

2. Module d'importation

 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' ; 

3. Importer des actifs

Vous pouvez importer toutes les icônes (non recommandées) ou chaque icône individuellement.

3.1 Importer toutes les icônes

 import { allIcons } from 'ngx-bootstrap-icons' ; 

3.2 Importer certaines icônes

 import { alarm , alarmFill , alignBottom } from 'ngx-bootstrap-icons' ;
// Select some icons (use an object, not an array)
const icons = {
  alarm ,
  alarmFill ,
  alignBottom
} ; 

4. Module d'importation (toutes les icônes)

 import { NgxBootstrapIconsModule , allIcons } from 'ngx-bootstrap-icons' ;

@ NgModule ( {
  declarations : [
    AppComponent
  ] ,
  imports : [
    BrowserModule ,
    AppRoutingModule ,
    NgxBootstrapIconsModule . pick ( allIcons )
  ] ,
  providers : [ ] ,
  bootstrap : [ AppComponent ]
} )
export class AppModule { } 

4.1. Module d'importation (certaines icônes)

 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' ;
import { alarm , alarmFill , alignBottom } from 'ngx-bootstrap-icons' ;

// Select some icons (use an object, not an array)
const icons = {
  alarm ,
  alarmFill ,
  alignBottom
} ;

@ NgModule ( {
  declarations : [
    AppComponent
  ] ,
  imports : [
    BrowserModule ,
    AppRoutingModule ,
    NgxBootstrapIconsModule . pick ( icons )
  ] ,
  providers : [ ] ,
  bootstrap : [ AppComponent ]
} )
export class AppModule { }

/**

Another way.
--------------

Import NgxBootstrapIconsModule.pick(icons) inside of the AppModule

Import NgxBootstrapIconsModule (without the pick() method) inside of any FeatureModule where will be used.

Now you can import icons in one place only (root module) and successfully use the component anywhere you want.

**/ 

4.2. Configurer le module (facultatif)

 import { NgxBootstrapIconsModule , ColorTheme } from 'ngx-bootstrap-icons' ;
import { alarm , alarmFill , alignBottom } from 'ngx-bootstrap-icons' ;

// Select some icons (use an object, not an array)
const icons = {
  alarm ,
  alarmFill ,
  alignBottom
} ;

@ NgModule ( {
  declarations : [
    AppComponent
  ] ,
  imports : [
    BrowserModule ,
    AppRoutingModule ,
    NgxBootstrapIconsModule . pick ( icons , { 
        width : '2em' , 
        height : '2em' , 
        theme : ColorTheme . Danger ,
    } )
  ] ,
  providers : [ ] ,
  bootstrap : [ AppComponent ]
} )
export class AppModule { } 

Configurer les options

Nom du praramètre d'entrée	Taper	Requis	Valeur par défaut	Description
largeur	string	false	null	Icône Largeur par défaut
hauteur	string	false	null	Hauteur par défaut de l'icône
thème	enum	false	null	thème de couleur par défaut

5. Utilisez-le dans le modèle

 < i - bs name = "alarm-fill" > < / i - bs >

ou (avec votre étiquette préfabriquée)

 < i i - bs name = "alarm-fill" > < / i >

ou utilisez éventuellement nos énumérations pour une prise en charge de la saisie semi-automatique

 import { iconNamesEnum } from 'ngx-bootstrap-icons' ;

public iconNames = iconNamesEnum ;

< i - bs [ name ] = "iconNames.AlarmFill" > < / i - bs >

Vous pouvez également utiliser la largeur et la hauteur pour l'icône (par défaut, la largeur et la hauteur sont 1rem)

 < i - bs 
  name = "alarm-fill" 
  width = "2rem" 
  height = "2rem" >
< / i - bs > 

 <i
  i-bs 
  name="alarm-fill" 
  width="2rem" 
  height="2rem">
</i>

6. Paramètres d'entrée

Nom du praramètre d'entrée	Taper	Requis	Valeur par défaut	Description
nom	string	true	null	nom de l'icône
largeur	string	false	null	Largeur de l'icône. Valeur par défaut utilisée à partir de SVG
hauteur	string	false	null	hauteur de l'icône. Valeur par défaut utilisée à partir de SVG
réinitialiser lesdimensions	boolean	false	false	Si ce paramètre est défini, les dimensions par défaut de l'icône SVG seront supprimées