Ng Heroicons

screenshot of Ng Heroicons
angular
tailwind

Ng Heroicons

Use Heroicons (https://heroicons.com) in your Angular application

Overview

NgHeroicons is a set of Angular components that allows you to use Heroicons in your Angular projects. It provides compatibility with Angular versions 11 to 14 and offers a variety of features to enhance your application's UI.

Features

  • Angular CLI compatibility with versions 11 to 14
  • Easy installation process using package managers like Yarn or npm
  • Ability to use Heroicons in your HTML tags with the option to choose between outline or solid icons
  • Customizable styles using inline CSS or external CSS files
  • Monorepo structure to ensure compatibility across different Angular setups
  • Common landing page for easy navigation and access to the latest Angular version
  • Build and run the project for testing purposes
  • Generate new Angular components for Heroicons

Installation

To install NgHeroicons in your Angular project, follow these steps:

  1. Open your terminal or command prompt.
  2. Run the following command to install the package using Yarn:
    $ yarn add @dimaslz/ng-heroicons@^XX
    
    or using npm:
    $ npm install @dimaslz/ng-heroicons@^XX
    
    Replace ^XX with the desired package version based on the Angular version compatibility table mentioned in the documentation.

Summary

NgHeroicons is a useful Angular component library that enables developers to easily incorporate Heroicons into their Angular projects. Its features, such as compatibility with multiple Angular versions, customizable styles, and easy installation process, make it a valuable tool for enhancing the UI of Angular applications. The monorepo structure ensures compatibility across different Angular setups, while the provided landing page and playground offer convenient ways to explore and test the library.

angular
Angular

Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.