angular tabler icons

الزاوي القنسي

وصف

تتيح لك هذه الحزمة استخدام أيقونات Tabler في تطبيقاتك الزاوية. Icons Tabler هي مجموعة من أيقونات SVG عالية الجودة المرخصة من معهد MIT لاستخدامها في مشاريع الويب الخاصة بك. تم تصميم كل أيقونة على شبكة 24 × 24 وسكتة دماغية 2 بكسل.

ثَبَّتَ

1. قم بتثبيت الحزمة

npm install angular-tabler-icons
# or
yarn add angular-tabler-icons

الاستخدام

مستقل

إذا كنت تستخدم المكونات المستقلة ، فاستخدم provideTablerIcons()

عنصر

 import { Component } from '@angular/core' ;
import { TablerIconComponent , provideTablerIcons } from 'angular-tabler-icons' ;
import {
  IconNumber123 ,
  IconAdOff ,
  IconHeartFilled ,
} from 'angular-tabler-icons/icons' ;

@ Component ( {
  selector : 'app-standalone' ,
  imports : [ TablerIconComponent ] ,
  /**
   * Provide the icons which you want to use in this component.
   */
  providers : [
    provideTablerIcons ( {
      IconNumber123 ,
      IconAdOff ,
      IconHeartFilled ,
    } ) ,
  ] ,
,
} )
export class StandaloneComponent { } 

HTML

 < fieldset >
  < legend > 123 </ legend >
  < i-tabler name =" number-123 " > </ i-tabler >
</ fieldset >

< fieldset >
  < legend > 123 (style, big) </ legend >
  < i-tabler name =" number-123 " style =" height: 60px; width: 60px; " > </ i-tabler >
</ fieldset >

< fieldset >
  < legend > ad-off (style, red) </ legend >
  < i-tabler name =" ad-off " style =" color: red; " > </ i-tabler >
</ fieldset >

< fieldset >
  < legend > heart-filled (style, red) </ legend >
  < i-tabler name =" heart-filled " style =" color: red; " > </ i-tabler >
</ fieldset > 

الرموز المتاحة

قائمة الرموز المتاحة: https://tabler.io/icons

يتضمن هذا الإصدار Icons Tabler V3.26.0 ، راجع Changelog لمعرفة أي الرموز المتوفرة.

أيقونات التصميم

يمكن تصميم كل رمز بشكل منفصل مع CSS:

 < i-tabler name =" camera " class =" big fill-red stroke-blue thin " > </ i-tabler > 

. big {
  height : 50 px ;
  width : 50 px ;
}

. fill-red {
  fill : red;
}

. stroke-blue {
  color : blue;
}

. thin {
  stroke-width : 1 px ;
}

خيارات

تتوفر بعض الخيارات لتكوين الوحدة النمطية:

 import { environment } from "../environments/environment" ;
import { TablerIconsModule } from "angular-tabler-icons" ;
import * as TablerIcons from "angular-tabler-icons/icons" ;

@ NgModule ( {
  imports : [
    TablerIconsModule . pick ( TablerIcons , {
      // Ignore warnings, such as "Tabler Icon not found", for example:
      //   ignoreWarnings: environment.production,
      ignoreWarnings : true ,
    } ) ,
  ] ,
  exports : [ TablerIconsModule ] ,
} )
export class IconsModule { } 

اختر كل الرموز

يمكنك استيراد جميع الرموز في وقت واحد عن طريق القيام بما يلي. ومع ذلك ، ضع في اعتبارك أنه من خلال القيام بذلك ، ستنتهي جميع الرموز في حزمة التطبيق الخاصة بك. على الرغم من أن هذا قد لا يكون مشكلة كبيرة للنماذج الأولية ، إلا أنه لا ينصح بأي تطبيق تخطط لإصداره .

 import { TablerIconsModule } from "angular-tabler-icons" ;
import * as TablerIcons from "angular-tabler-icons/icons" ;

@ NgModule ( {
  imports : [ TablerIconsModule . pick ( TablerIcons ) ] ,
  exports : [ TablerIconsModule ] ,
} )
export class IconsModule { }

ngmodule (إرث)

1. قم بإنشاء وحدة لاستضافة الرموز التي ستستوردها

ng generate module icons

2. استيراد الأصول

تحتاج إلى الاستيراد:

• Tablericonsmodule ، لأنه يحتوي على مكون <i-tabler>
• الرموز التي تحتاجها

وضعنا هذا في iconsmodule للنموذج. انظر المثال أدناه:

ملف: icon.module.ts

 import { NgModule } from "@angular/core" ;

import { TablerIconsModule } from "angular-tabler-icons" ;
import { IconCamera , IconHeart , IconBrandGithub } from "angular-tabler-icons/icons" ;

// Select some icons (use an object, not an array)
const icons = {
  IconCamera ,
  IconHeart ,
  IconBrandGithub ,
} ;

@ NgModule ( {
  imports : [ TablerIconsModule . pick ( icons ) ] ,
  exports : [ TablerIconsModule ] ,
} )
export class IconsModule { }

// NOTES:
// 1. We add TablerIconsModule to the 'exports', since the <i-tabler> component will be used in templates of parent module
// 2. Don't forget to pick some icons using TablerIconsModule.pick({ ... })

3. استيراد iconsmodule

إذا كنت تستخدم ngmodules ، فاستبئها بهذه الطريقة:

 import { NgModule } from "@angular/core" ;
import { MyComponent } from "./my/my.component" ;
import { IconsModule } from "./icons.module" ;

@ NgModule ( {
  declarations : [ MyComponent ] ,
  imports : [
    IconsModule , // <--- Here
  ] ,
} )
export class MyModule { }

4. استخدمه في القالب

بعد استيراد iconsmodule في الميزة أو الوحدة النمطية المشتركة ، استخدم الرموز على النحو التالي:

 < i-tabler name =" camera " > </ i-tabler >
< i-tabler name =" heart " style =" color: red; " > </ i-tabler >
< i-tabler name =" heart-filled " style =" color: red; " > </ i-tabler >
< i-tabler name =" brand-github " class =" someclass " > </ i-tabler > 

توافق الإصدار الزاوي

زاوي	الزاوي القنسي
18 و 19	3.22.0+
17	2.40.1+
16	2.21.1+
15	1.117.1+
14	1.72.1+
13	1.53.1+
12	1.41.3+
11	1.41.0+

المساهمة

لا تتردد في الإبلاغ عن المشكلات أو المساهمة في هذا المشروع! فيما يلي بعض النصائح للبدء:

yarn lib:generate  # generate components from Tabler Icons
yarn lib:build  # build angular library 

كيفية إعادة بناء إصدار أيقونات Tabler الأحدث

1. قم بتشغيل إجراءات GitHub Workflow Automatic PR on Tabler Icons Release ، مع إصدار رموز Tabler الجديدة (على سبيل المثال 2.40.0 ). سيقوم سير العمل هذا بإنشاء طلب سحب جديد تلقائيًا.
2. الموافقة ودمج طلب السحب الذي تم إنشاؤه.
3. قم بإنشاء إصدار/علامة مع إصدار الرموز Tabler الجديدة.

يتم إعادة بناء الحزمة تلقائيًا ونشرها ، مع Build and Publish package .

المساهمين

شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

بيير ؟

أرجين ألثوف ؟

جان شاب

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!