ngx bootstrap icons

NGX-Bootstrap-icons

Este módulo angular permite que você use os ícones de bootstrap em seu aplicativo angular sem dependências adicionais.

npm i ngx-bootstrap-icons --save

Demonstração

Demonstração aqui

Uso

1. Instale o pacote

npm i ngx-bootstrap-icons --save

2. Módulo de importação

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

3. Importar ativos

Você pode importar todos os ícones (não recomendados) ou cada ícone individualmente.

3.1 Importar todos os ícones

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

3.2 importar alguns ícones

 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 importação (todos os ícones)

 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 importação (alguns ícones)

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

Configure opções

Nome da entrada Prarameter	Tipo	Obrigatório	Valor padrão	Descrição
largura	string	false	null	Ícone Largura padrão
altura	string	false	null	Altura padrão do ícone
tema	enum	false	null	Tema de cor padrão

5. Use -o no modelo

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

ou (com sua tag preferida)

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

ou opcionalmente, use nossas enumes para obter suporte de preenchimento automático

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

public iconNames = iconNamesEnum ;

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

Além disso, você pode usar a largura e a altura para o ícone (por largura e altura padrão são 1Rem)

 < 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

Nome da entrada Prarameter	Tipo	Obrigatório	Valor padrão	Descrição
nome	string	true	null	nome do ícone
largura	string	false	null	largura do ícone. Valor padrão usado de SVG
altura	string	false	null	altura do ícone. Valor padrão usado de SVG
ResetDefaultDimensions	boolean	false	false	Se este parâmetro estiver definido, as dimensões padrão do ícone SVG serão removidas