ngx bootstrap icons

ngx-bootstrap-icons

تتيح لك هذه الوحدة الزاوية استخدام أيقونات 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 { } 

تكوين الخيارات

اسم الإدخال prarameter	يكتب	مطلوب	القيمة الافتراضية	وصف
عرض	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. معلمات الإدخال

اسم الإدخال prarameter	يكتب	مطلوب	القيمة الافتراضية	وصف
اسم	string	true	null	اسم الرمز
عرض	string	false	null	عرض الرمز. القيمة الافتراضية المستخدمة من SVG
ارتفاع	string	false	null	ارتفاع الأيقونة. القيمة الافتراضية المستخدمة من SVG
ResetDefaultDimensions	boolean	false	false	إذا تم تعيين هذه المعلمة ، فسيتم إزالة الأبعاد الافتراضية لرمز SVG