ng heroicons

@ dimaslz / ng-heroicons

Ngherroicons juste c'est un composant angulaire d'utiliser des héroïcons dans vos projets. J'espère que cela pourrait être utile.

Si vous voulez savoir comment fonctionne Angular CLI, suivez ce https://cli.angular.io/.

Demo en direct: https://ng-heroiicons.dimaslz.dev

Comment installer dans votre projet

Ce package a une compatibilité avec la version angulaire de 11 à 18.

version angulaire	version de package
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	défaut

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

//... 

Comment utiliser

Accédez à https://ng-heroiicons.dimaslz.dev et obtenez le nom de l'icône et utilisez dans votre tag html suivant le suffixe {outline|solid}-icon . Par exemple: academic cap doit être <academic-cap-outline-icon></academic-cap-outline-icon> pour les contour ou <academic-cap-solid-icon></academic-cap-solid-icon> solid-icon> pour les icônes solides. De la version > = 1.18.1 est possible d'utiliser le composant dynamique <ng-heroicons icon="..." />

Vous pouvez utiliser votre style en ligne, CSS ou simplement passer la couleur et la taille.

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

En utilisant un composant dynamique <ng-heroicons ... icon="..." /> (à partir des versions > = 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 " /> 

Développement

Il s'agit d'un monorepo pour construire les composants icônes pour plusieurs versions angulaires. Pour éviter les conflics avec la compatibilité de l'Angular 11 à 14, nous n'utilisons pas workspaces , seulement un dossier séparé par configuration angulaire.

Atterrissage

La page de destination est l'atterrissage commun https://ng-heroicons.dimaslz.dev/ qui utilise la dernière version angulaire.

• Construisez le Angular 14 lib: $ yarn --cwd=packages/angular-v14 build lib -c production
• Actualisez le contenu de distribution dans dist/v14 : $ yarn v14-copy-release
• Installer des forfaits d'atterrissage: $ yarn --cwd=landing install
• Run Project: $ yarn --cwd=landing start
• Rejoignez la page en http: // localhost: 4200

Construire la bibliothèque par version

Gardez à l'esprit, vous devriez d'abord construire le package lib

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

Exécutez une aire de jeux par version

Gardez à l'esprit, vous devriez d'abord construire le package lib . Ce jeu de jeux n'a pas de spécial, une page de démonstration pour tester la bibliothèque fonctionne comme prévu.

version angulaire	commande
angulaire 11	$ yarn --cwd=packages/angular-v11 start playground
angulaire 12	$ yarn --cwd=packages/angular-v12 start playground
angulaire 13	$ yarn --cwd=packages/angular-v13 start playground
angulaire 14	$ yarn --cwd=packages/angular-v14 start playground
angulaire 15	$ yarn --cwd=packages/angular-v15 start playground
angulaire 16	$ yarn --cwd=packages/angular-v16 start playground
angulaire 17	$ yarn --cwd=packages/angular-v17 start playground
angulaire 18	$ yarn --cwd=packages/angular-v18 start playground

Régénérer les composants

$ yarn generate Cela générera les nouveaux composants angulaires dans projects/ng-heroicons/src/lib/heroicons/outline et projects/ng-heroicons/src/lib/heroicons/solid , et le modélisé dans le terrain de jeu projects/playground/src/app/icons/outline-icons.html et projects/playground/src/app/icons/solid-icons.html

Construire des héroïcons

$ yarn build --prod ng-heroicons

Auteur

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

Mes autres projets

• https://randomdata.loremapi.io: données de simulation API (pas d'open source)
• https://svg-iccon-2-fw-component.dimaslz.dev: composant SVG à Framework (Open Source Soon)
• https://ng-heroiicons.dimaslz.dev: Utilisez des héroïcons.com dans vos projets angulaires (open source)