ng heroicons

@dimaslz/ng-heroicons

Ngheroicons hanya itu adalah komponen sudut untuk menggunakan heroikon dalam proyek Anda. Saya berharap itu bisa berguna.

Jika Anda ingin tahu bagaimana cara kerja cli, ikuti https://cli.angular.io/.

Demo Langsung: https://ng-heroicons.dimaslz.dev

Cara menginstal di proyek Anda

Paket ini memiliki kompatibilitas dengan versi sudut dari 11 hingga 18.

versi sudut	versi paket
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	bawaan

$ 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 ,
  ] ,
  // ...
} )

//... 

Cara menggunakan

Buka https://ng-heroicons.dimaslz.dev dan dapatkan nama ikon dan gunakan dalam tag Anda html mengikuti akhiran {outline|solid}-icon . Sebagai contoh: academic cap harus <academic-cap-outline-icon></academic-cap-outline-icon> untuk garis besar atau <academic-cap-solid-icon></academic-cap-solid-icon> untuk ikon padat. Dari Versi > = 1.18.1 dimungkinkan untuk menggunakan komponen dinamis <ng-heroicons icon="..." />

Anda dapat menggunakan gaya dalam antrean, CSS atau hanya lulus warna dan ukuran.

 <!-- 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 >

Dengan menggunakan komponen dinamis <ng-heroicons ... icon="..." /> (dari versi > = 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 " /> 

Perkembangan

Ini adalah monorepo untuk membangun komponen ikon untuk berbagai versi sudut. Untuk menghindari konferensi dengan kompatibilitas dari sudut 11 hingga 14, kami tidak menggunakan workspaces , hanya folder terpisah per pengaturan sudut.

Pendaratan

Halaman arahan adalah pendaratan umum https://ng-heroicons.dimaslz.dev/ yang menggunakan versi sudut terakhir.

• Bangun Angular 14 Lib: $ yarn --cwd=packages/angular-v14 build lib -c production
• Segarkan Konten Distribusi di dist/v14 : $ yarn v14-copy-release
• Pasang Paket Pendaratan: $ yarn --cwd=landing install
• Jalankan Proyek: $ yarn --cwd=landing start
• Bergabunglah dengan halaman di http: // localhost: 4200

Bangun Perpustakaan per Versi

Perlu diingat, pertama -tama Anda harus membangun paket lib

versi sudut	memerintah
Angular 11	$ yarn --cwd=packages/angular-v11 build lib -c production
Angular 12	$ yarn --cwd=packages/angular-v12 build lib -c production
Angular 13	$ yarn --cwd=packages/angular-v13 build lib -c production
Angular 14	$ yarn --cwd=packages/angular-v14 build lib -c production
Angular 15	$ yarn --cwd=packages/angular-v15 build lib -c production
Angular 16	$ yarn --cwd=packages/angular-v16 build lib -c production
Angular 17	$ yarn --cwd=packages/angular-v17 build lib -c production
Angular 18	$ yarn --cwd=packages/angular-v18 build lib -c production

Jalankan taman bermain per versi

Perlu diingat, pertama -tama Anda harus membangun paket lib . Taman bermain ini tidak memiliki khusus, adalah halaman demo untuk menguji perpustakaan berfungsi seperti yang diharapkan.

versi sudut	memerintah
Angular 11	$ yarn --cwd=packages/angular-v11 start playground
Angular 12	$ yarn --cwd=packages/angular-v12 start playground
Angular 13	$ yarn --cwd=packages/angular-v13 start playground
Angular 14	$ yarn --cwd=packages/angular-v14 start playground
Angular 15	$ yarn --cwd=packages/angular-v15 start playground
Angular 16	$ yarn --cwd=packages/angular-v16 start playground
Angular 17	$ yarn --cwd=packages/angular-v17 start playground
Angular 18	$ yarn --cwd=packages/angular-v18 start playground

Komponen Regenerasi

$ yarn generate ini akan menghasilkan komponen sudut baru dalam projects/ng-heroicons/src/lib/heroicons/outline dan projects/ng-heroicons/src/lib/heroicons/solid dan html dan projects/playground/src/app/icons/outline-icons.html dan Icons projects/playground/src/app/icons/solid-icons.html

Membangun heroikon

$ yarn build --prod ng-heroicons

Pengarang

 {
  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"
} 

Proyek saya yang lain

• https://randomdata.loremapi.io: data tiruan API (tidak ada sumber terbuka)
• https://svg-icon-2-fw-component.dimaslz.dev: svg ke komponen kerangka kerja (segera sumber terbuka)
• https://ng-heroicons.dimaslz.dev: gunakan heroicons.com dalam proyek sudut Anda (open source)