ngx bootstrap icons

ngx-bootstrap-icons

该角模块允许您在没有其他依赖项的情况下使用Angular应用程序中的Bootstrap图标。

npm i ngx-bootstrap-icons --save

演示

演示在这里

用法

1。安装软件包

npm i ngx-bootstrap-icons --save

2。导入模块

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

3。进口资产

您可以单独导入所有图标（未推荐）或每个图标。

3.1导入所有图标

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

3.2导入一些图标

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

4。导入模块（所有图标）

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

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

4.1。导入模块（某些图标）

 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。配置模块（可选）

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

配置选项

输入原始计的名称	类型	必需的	默认值	描述
宽度	string	false	null	图标默认宽度
高度	string	false	null	图标默认高度
主题	enum	false	null	默认颜色主题

5。在模板中使用它

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

或（使用您的预先标签）

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

或选择使用我们的枚举进行自动完成支持

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

public iconNames = iconNamesEnum ;

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

另外，您可以使用图标的宽度和高度（默认宽度和高度为1REM）

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

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

6。输入参数

输入原始计的名称	类型	必需的	默认值	描述
姓名	string	true	null	标志的名称
宽度	string	false	null	图标的宽度。 SVG使用的默认值
高度	string	false	null	图标的高度。 SVG使用的默认值
resetDefaultDimensions	boolean	false	false	如果设置了此参数，则将删除SVG图标的默认维度