@dimaslz/ng-heroicons

NgHeroicons just it is a Angular components to use Heroicons in your projects. I hope that could be useful.

If you want to know how is working Angular CLI follow this https://cli.angular.io/.

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

How to install in your project

This package has compatibility with Angular version from 11 to 19.

[!IMPORTANT] The versions from 11 to 16, will not longer be maintained anymore.

| angular version | package version || |-|-|-| | 11.x.x | ^1.11.* || | 12.x.x | ^1.12.* || | 13.x.x | ^1.13.* || | 14.x.x | ^1.14.* || | 15.x.x | ^1.15.* || | 16.x.x | ^1.16.* || | 17.x.x | ^1.17.* || | 18.x.x | ^1.18.0 || | | ^1.18.1 || | | ^1.18.2 || | 19.x.x | ^1.19.0 | ❌ issue ❌ | | | ^1.19.1 | default |

$ yarn add @dimaslz/ng-heroicons@^XX

$ npm install @dimaslz/ng-heroicons@^XX

from angular 11 to 17

// app.module.ts
import { NgHeroiconsModule } from "@dimaslz/ng-heroicons";
// ...

@NgModule({
  // ...
  imports: [
    CommonModule,
    NgHeroiconsModule,
  ],
  // ...
})

//...

from angular 18

// app.config.ts
import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { NgHeroiconsModule } from '@dimaslz/ng-heroicons';

import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(withEventReplay()),
    importProvidersFrom(
      NgHeroiconsModule.forRoot()
    )
  ]
};

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgHeroiconsModule } from '@dimaslz/ng-heroicons';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, NgHeroiconsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {}

How to use

Go to https://ng-heroicons.dimaslz.dev and get the name of the icon and use in your tag html following suffix {outline|solid}-icon. For example: academic cap should be <academic-cap-outline-icon></academic-cap-outline-icon> for outline or <academic-cap-solid-icon></academic-cap-solid-icon> for solid icons. From version >= 1.18.1 is possible to use the dynamic component <ng-heroicons icon="..." />

You can use your style in line, css or just pass color and size.

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

By using a dynamic component <ng-heroicons ... icon="..." /> (from 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" />

Development

This is a monorepo to build the icon components for multiple Angular versions. To avoid conflics with compatibility from Angular 11 to 14, we are not using workspaces, only separated folder per Angular setup.

Landing

Landing page is the common landing https://ng-heroicons.dimaslz.dev/ which is using the last Angular version.

• Build the Angular 14 lib: $ yarn --cwd=packages/angular-v14 build lib -c production
• Refresh the distribution content in dist/v14: $ yarn v14-copy-release
• Install Landing packages: $ yarn --cwd=landing install
• Run project: $ yarn --cwd=landing start
• Join the page in http://localhost:4200

Build library per version

Keep in mind, first you should build the lib package

| angular version | command | |-|-| | 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 | | angular 19 | $ yarn --cwd=packages/angular-v19 build lib -c production |

Run playground per version

Keep in mind, first you should build the lib package. This playgrounds does not have any special, is a demo page to test the library is working as expected.

| angular version | command | |-|-| | 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 | | angular 19 | $ yarn --cwd=packages/angular-v19 start playground |

Regenerate components

$ yarn generate This will generate the new angular components in projects/ng-heroicons/src/lib/heroicons/outline and projects/ng-heroicons/src/lib/heroicons/solid, and the templated in playground as projects/playground/src/app/icons/outline-icons.html and projects/playground/src/app/icons/solid-icons.html

Build heroicons

$ yarn build --prod ng-heroicons

Author

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

My other projects

• https://randomdata.loremapi.io: API mock data (no open source)
• https://svg-icon-2-fw-component.dimaslz.dev: SVG to Framework component (open source soon)
• https://ng-heroicons.dimaslz.dev: Use Heroicons.com in you Angular projects (open source)