ng heroicons

@dimaslz/ng-Heroicons

Ngheroicons nur sind es eine Winkelkomponenten, Heldicons in Ihren Projekten zu verwenden. Ich hoffe das könnte nützlich sein.

Wenn Sie wissen möchten, wie arbeitet Angular CLI, folgen Sie dieser https://cli.angular.io/.

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

So installieren Sie in Ihrem Projekt

Dieses Paket hat Kompatibilität mit einer Winkelversion von 11 bis 18.

Winkelversion	Paketversion
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	Standard

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

//... 

Wie man benutzt

Gehen Sie zu https://ng-heroicons.dimaslz.dev und erhalten Sie den Namen des Symbols {outline|solid}-icon Zum Beispiel: academic cap sollte <academic-cap-outline-icon></academic-cap-outline-icon> für den Umriss oder <academic-cap-solid-icon></academic-cap-solid-icon> für solide Icons sein. Aus Version > = 1.18.1 kann die dynamische Komponente <ng-heroicons icon="..." /> verwenden

Sie können Ihren Stil in der Linie, CSS oder einfach nur Farbe und Größe übergeben.

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

Durch die Verwendung einer dynamischen Komponente <ng-heroicons ... icon="..." /> (aus Versionen > = 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 " /> 

Entwicklung

Dies ist ein Monorepo, um die Symbolkomponenten für mehrere Winkelversionen zu erstellen. Um Konflikte mit Kompatibilität von Angular 11 bis 14 zu vermeiden, verwenden wir keine workspaces , sondern nur getrennten Ordner pro Winkelaufbau.

Landung

Die Landing Page ist die übliche Landung https://ng-heroicons.dimaslz.dev/, die die letzte Winkelversion verwendet.

• Bauen Sie die Angular 14 lib: $ yarn --cwd=packages/angular-v14 build lib -c production
• Aktualisieren Sie den Verteilungsgehalt in dist/v14 : $ yarn v14-copy-release
• Installieren Sie Landungspakete: $ yarn --cwd=landing install
• Rennen Sie Projekt: $ yarn --cwd=landing start
• Treten Sie der Seite in http: // localhost: 4200 bei

Bibliothek pro Version erstellen

Denken Sie daran, zuerst sollten Sie das lib -Paket erstellen

Winkelversion	Befehl
Angular 11	$ yarn --cwd=packages/angular-v11 build lib -c production
Angular 12	$ yarn --cwd=packages/angular-v12 build lib -c production
Winkel 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

Spielplatz pro Version rennen

Denken Sie daran, zuerst sollten Sie das lib -Paket erstellen. Diese Spielplätze haben keine besondere, ist eine Demo -Seite, um die Bibliothek wie erwartet zu testen.

Winkelversion	Befehl
Angular 11	$ yarn --cwd=packages/angular-v11 start playground
Angular 12	$ yarn --cwd=packages/angular-v12 start playground
Winkel 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

Komponenten regenerieren

$ yarn generate Dies generiert die neuen Winkelkomponenten in projects/ng-heroicons/src/lib/heroicons/outline und projects/ng-heroicons/src/lib/heroicons/solid , und die Vorlagen als projects/playground/src/app/icons/outline-icons.html und projects/playground/src/app/icons/solid-icons.html

Heldengebäude bauen

$ yarn build --prod ng-heroicons

Autor

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

Meine anderen Projekte

• https://randomdata.loremapi.io: API -Mockdaten (keine Open Source)
• https://svg-icon-2-fw-component.dimaslz.dev: SVG zu Framework-Komponente (Open Source Soon)
• https://ng-heroicons.dimaslz.dev: Verwenden Sie Heroicons.com in Ihren Angular-Projekten (Open Source)