ngx bootstrap icons

NGX-BOOTSTRAP-ICONS

このAngularモジュールを使用すると、追加の依存関係なしにAngularアプリケーションでブートストラップアイコンを使用できます。

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アイコンのデフォルトの寸法が削除されます