الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

@DIMASLZ/NG-HINGLICONS

Ngheroicons فقط هي مكونات زاوية لاستخدام البطل في مشاريعك. آمل أن يكون ذلك مفيدًا.

إذا كنت تريد أن تعرف كيف تعمل CLI الزاوي ، اتبع هذا https://cli.angular.io/.

العرض التوضيحي المباشر: https://ng-herflicons.dimaslz.dev

كيفية التثبيت في مشروعك

هذه الحزمة لها توافق مع الإصدار الزاوي من 11 إلى 18.

نسخة زاوية إصدار الحزمة
11.xx ^1.11.*
12.xx ^1.12.*
13.xx ^1.13.*
14.xx ^1.14.*
15.xx ^1.15.*
16.xx ^1.16.*
17.xx ^1.17.*
18.xx ^1.18.0
^1.18.1
^1.18.2 تقصير

$ yarn add @dimaslz/ng-heroicons@^XX

$ npm install @dimaslz/ng-heroicons@^XX 

 // app.module.ts
import { NgHeroiconsModule } from "@dimaslz/ng-heroicons" ;
// ...

@ NgModule ( {
  // ...
  imports : [
    CommonModule ,
    NgHeroiconsModule ,
  ] ,
  // ...
} )

//...

كيفية استخدام

انتقل إلى https://ng-herflicons.dimaslz.dev واحصل على اسم الرمز واستخدم في العلامة html التالية لاحقة {outline|solid}-icon . على سبيل المثال: يجب أن يكون academic cap <academic-cap-outline-icon></academic-cap-outline-icon> من أجل المخطط التفصيلي أو <academic-cap-solid-icon></academic-cap-solid-icon> للرموز الصلبة. من الإصدار > = 1.18.1 من الممكن استخدام المكون الديناميكي <ng-heroicons icon="..." />

يمكنك استخدام أسلوبك في الطابور أو CSS أو مجرد تمرير اللون وحجمه. 

 <!-- using style in line (style for color will affect to svg) -->
< academic-cap-outline-icon style =" color: red; " > </ academic-cap-outline-icon >

<!-- using css classes (class for color will affect to svg) -->
< academic-cap-outline-icon class =" text-red-400 " > </ academic-cap-outline-icon >

<!-- pass color or size -->
< academic-cap-outline-icon size =" 48 " color =" red " > </ academic-cap-outline-icon >

<!-- To apply specific style to the SVG, use `svgStyle` -->
< academic-cap-outline-icon svgStyle =" color: red; " > </ academic-cap-outline-icon >

<!-- To apply specific css to the SVG, use `svgClass` -->
< academic-cap-outline-icon svgClass =" your-class-for-the-svg " > </ academic-cap-outline-icon >

باستخدام مكون ديناميكي <ng-heroicons ... icon="..." /> (من الإصدارات > = 1.18.1 ) 

 <!-- force to render outline icon -->
< ng-heroicons icon =" academic-cap " outline />

<!-- force to render solid icon -->
< ng-heroicons icon =" academic-cap " solid />

<!-- using style -->
< ng-heroicons icon =" academic-cap " style =" color: red; " />

<!-- using css classes (class for color will affect to svg) -->
< ng-heroicons icon =" academic-cap " class =" text-red-400 " />

<!-- pass color or size -->
< ng-heroicons icon =" academic-cap " size =" 48 " color =" red " />

تطوير

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

الهبوط

الصفحة المقصودة هي الهبوط الشائع https://ng-herflicons.dimaslz.dev/ الذي يستخدم الإصدار الزاوي الأخير.

  • بناء الزاوي 14 lib: $ yarn --cwd=packages/angular-v14 build lib -c production
  • قم بتحديث محتوى التوزيع في dist/v14 : $ yarn v14-copy-release
  • تثبيت حزم الهبوط: $ yarn --cwd=landing install
  • تشغيل المشروع: $ yarn --cwd=landing start
  • انضم إلى الصفحة في http: // localhost: 4200

بناء مكتبة لكل إصدار

ضع في اعتبارك ، أولاً يجب عليك بناء حزمة lib

نسخة زاوية يأمر
Angular 11 $ yarn --cwd=packages/angular-v11 build lib -c production
Angular 12 $ yarn --cwd=packages/angular-v12 build lib -c production
الزاوي 13 $ yarn --cwd=packages/angular-v13 build lib -c production
زاوي 14 $ yarn --cwd=packages/angular-v14 build lib -c production
زاوي 15 $ yarn --cwd=packages/angular-v15 build lib -c production
Angular 16 $ yarn --cwd=packages/angular-v16 build lib -c production
زاوي 17 $ yarn --cwd=packages/angular-v17 build lib -c production
زاوي 18 $ yarn --cwd=packages/angular-v18 build lib -c production

تشغيل ملعب لكل إصدار

ضع في اعتبارك ، أولاً يجب عليك بناء حزمة lib . لا تحتوي هذه الملاعب على أي خاص ، وهي صفحة تجريبية لاختبار المكتبة تعمل كما هو متوقع.

نسخة زاوية يأمر
Angular 11 $ yarn --cwd=packages/angular-v11 start playground
Angular 12 $ yarn --cwd=packages/angular-v12 start playground
الزاوي 13 $ yarn --cwd=packages/angular-v13 start playground
زاوي 14 $ yarn --cwd=packages/angular-v14 start playground
زاوي 15 $ yarn --cwd=packages/angular-v15 start playground
Angular 16 $ yarn --cwd=packages/angular-v16 start playground
زاوي 17 $ yarn --cwd=packages/angular-v17 start playground
زاوي 18 $ yarn --cwd=packages/angular-v18 start playground

تجديد المكونات

$ yarn generate هذا سيولد المكونات الزاوية الجديدة في projects/ng-heroicons/src/lib/heroicons/outline projects/ng-heroicons/src/lib/heroicons/solid ، والاحتفال في الملعب projects/playground/src/app/icons/outline-icons.html projects/playground/src/app/icons/solid-icons.html

بناء البطل

$ yarn build --prod ng-heroicons

مؤلف 

 {
  name : "Dimas López" ,
  role : "FullStack Software Engineer" ,
  alias : "dimaslz" ,
  twitter : "https://twitter.com/dimaslz" ,
  site : "https://dimaslz.com" ,
  linkedin : "https://www.linkedin.com/in/dimaslopezzurita"
}

مشاريعي الأخرى

  • https://randomdata.loremapi.io: API Dock Data (لا يوجد مصدر مفتوح)
  • https://svg-icon-2-fw-component.dimaslz.dev: SVG إلى مكون الإطار (المصدر المفتوح قريبًا)
  • https://ng-herboyicons.dimaslz.dev: استخدم Heroicons.com في مشاريعك الزاوية (المصدر المفتوح)
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل