ng heroicons

@dimaslz/ng-heroicons

Ngheroicons solo es un componente angular usar heroicons en sus proyectos. Espero que eso pueda ser útil.

Si quieres saber cómo funciona, la cli angular sigue esta https://cli.angular.io/.

Demo en vivo: https://ng-heroicons.dimaslz.dev

Cómo instalar en su proyecto

Este paquete tiene compatibilidad con la versión angular de 11 a 18.

versión angular	versión de paquete
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	por defecto

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

//... 

Cómo usar

Vaya a https://ng-heroicons.dimaslz.dev y obtenga el nombre del icono y use en su etiqueta html siguiendo el sufijo {outline|solid}-icon . Por ejemplo: academic cap debe ser <academic-cap-outline-icon></academic-cap-outline-icon> para contorno o <academic-cap-solid-icon></academic-cap-solid-icon> para iconos sólidos. Desde la versión > = 1.18.1 es posible usar el componente dinámico <ng-heroicons icon="..." />

Puede usar su estilo en línea, CSS o simplemente pasar color y tamaño.

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

Mediante el uso de un componente dinámico <ng-heroicons ... icon="..." /> (de versiones > = 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 " /> 

Desarrollo

Este es un Monorepo para construir los componentes del icono para múltiples versiones angulares. Para evitar los conflices con la compatibilidad de Angular 11 a 14, no estamos utilizando workspaces , solo una carpeta separada por configuración angular.

Aterrizaje

La página de destino es el aterrizaje común https://ng-heroicons.dimaslz.dev/ que está utilizando la última versión angular.

• Construya el Angular 14 lib: $ yarn --cwd=packages/angular-v14 build lib -c production
• Actualice el contenido de distribución en dist/v14 : $ yarn v14-copy-release
• Instalar paquetes de destino: $ yarn --cwd=landing install
• Ejecutar proyecto: $ yarn --cwd=landing start
• Únase a la página en http: // localhost: 4200

Construir biblioteca por versión

Tenga en cuenta que primero debe construir el paquete lib

versión angular	dominio
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

Run Playground por versión

Tenga en cuenta que primero debe construir el paquete lib . Este patio de recreo no tiene ningún especial, es una página de demostración para probar que la biblioteca funciona como se esperaba.

versión angular	dominio
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

Regenerar componentes

$ yarn generate esto generará los nuevos componentes angulares en projects/ng-heroicons/src/lib/heroicons/outline y projects/ng-heroicons/src/lib/heroicons/solid , y el plato en playground como projects/playground/src/app/icons/outline-icons.html y projects/playground/src/app/icons/solid-icons.html

Construir heroicons

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

Mis otros proyectos

• https://randomdata.loremapi.io: datos simulados de API (sin código abierto)
• https://svg-icon-2-fw-component.dimaslz.dev: svg al componente marco (código abierto pronto)
• https://ng-heroicons.dimaslz.dev: use heroicons.com en sus proyectos angulares (código abierto)