ng heroicons

@DIMASLZ/NG-HEREROICONS

Ngheroicons apenas é um componente angular usar heróicons em seus projetos. Espero que isso possa ser útil.

Se você quiser saber como está funcionando a CLI angular, siga este https://cli.angular.io/.

Demonstração ao vivo: https://ng-heroicons.dimaslz.dev

Como instalar em seu projeto

Este pacote tem compatibilidade com a versão angular de 11 a 18.

versão angular	versão do pacote
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	padrão

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

//... 

Como usar

Vá para https://ng-heroicons.dimaslz.dev e obtenha o nome do ícone e use em sua tag html após sufixo {outline|solid}-icon . Por exemplo: academic cap deve ser <academic-cap-outline-icon></academic-cap-outline-icon> para esboço ou <academic-cap-solid-icon></academic-cap-solid-icon> para ícones sólidos. De versão > = 1.18.1 é possível usar o componente dinâmico <ng-heroicons icon="..." />

Você pode usar seu estilo na fila, CSS ou simplesmente passar de cor e tamanho.

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

Usando um componente dinâmico <ng-heroicons ... icon="..." /> (de versões > = 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 " /> 

Desenvolvimento

Este é um monorepo para construir os componentes do ícone para várias versões angulares. Para evitar conflitos com a compatibilidade de 11 a 14 angular, não estamos usando workspaces , apenas pasta separada por configuração angular.

Pousar

A página de aterrissagem é o pouso comum https://ng-heroicons.dimaslz.dev/, que está usando a última versão angular.

• Construa o angular 14 lib: $ yarn --cwd=packages/angular-v14 build lib -c production
• Atualize o conteúdo de distribuição em dist/v14 : $ yarn v14-copy-release
• Instale pacotes de aterrissagem: $ yarn --cwd=landing install
• Projeto de execução: $ yarn --cwd=landing start
• Participe da página em http: // localhost: 4200

Construir biblioteca por versão

Lembre -se, primeiro você deve construir o pacote lib

versão angular	comando
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

Execute o playground por versão

Lembre -se de que primeiro você deve construir o pacote lib . Este playgrounds não tem nenhum especial, é uma página de demonstração para testar a biblioteca que está funcionando como esperado.

versão angular	comando
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

Componentes regenerados

$ yarn generate isso gerará os novos componentes angulares em projects/ng-heroicons/src/lib/heroicons/outline e projects/ng-heroicons/src/lib/heroicons/solid , e o modelo em playground como projects/playground/src/app/icons/outline-icons.html projects/playground/src/app/icons/solid-icons.html

Construir heróicons

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

Meus outros projetos

• https://randomdata.loremapi.io: API Mock Data (sem código aberto)
• https://svg-iCon-2-fw-component.dimaslz.dev: componente SVG para estrutura (código aberto em breve)
• https://ng-heroicons.dimaslz.dev: use heroicons.com em seus projetos angulares (código aberto)