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圖標的默認維度