ngx bootstrap icons

ngx-bootstrap-icons

Этот угловой модуль позволяет использовать значки начальной загрузки в вашем угловом приложении без дополнительных зависимостей.

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 >

Кроме того, вы можете использовать ширину и высоту для значка (по ширине по умолчанию и высоте 1 сутки)

 < 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 будут удалены