ngx bootstrap icons

ngx-bootstrap-icons

Este módulo angular le permite usar los iconos de arranque en su aplicación angular sin dependencias adicionales.

npm i ngx-bootstrap-icons --save

Manifestación

Demostración aquí

Uso

1. Instale el paquete

npm i ngx-bootstrap-icons --save

2. Módulo de importación

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

3. Activos de importación

Puede importar todos los iconos (no recomendados) o cada icono individualmente.

3.1 Importar todos los iconos

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

3.2 Importar algunos iconos

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

4. Módulo de importación (todos los iconos)

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

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

4.1. Módulo de importación (algunos iconos)

 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. Configurar módulo (opcional)

 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 { } 

Configurar opciones

Nombre del praraméter de entrada	Tipo	Requerido	Valor predeterminado	Descripción
ancho	string	false	null	icono ancho predeterminado
altura	string	false	null	icono Altura predeterminada
tema	enum	false	null	Tema de color predeterminado

5. Úselo en plantilla

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

o (con su etiqueta prefabricada)

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

o opcionalmente usa nuestros enums para soporte de autocompleto

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

public iconNames = iconNamesEnum ;

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

También puede usar el ancho y la altura para el icono (por predeterminado, el ancho y la altura son 1 REM)

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

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

6. Parámetros de entrada

Nombre del praraméter de entrada	Tipo	Requerido	Valor predeterminado	Descripción
nombre	string	true	null	Nombre del icono
ancho	string	false	null	Ancho del icono. Valor predeterminado utilizado desde SVG
altura	string	false	null	altura del icono. Valor predeterminado utilizado desde SVG
Resetdefaultdimensions	boolean	false	false	Si se establece este parámetro, se eliminarán las dimensiones predeterminadas del icono SVG