Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dimaslz/ng-heroicons
Use Heroicons (https://heroicons.com) in your Angular application
https://github.com/dimaslz/ng-heroicons
angular components heroicons icons tailwindcss
Last synced: 3 months ago
JSON representation
Use Heroicons (https://heroicons.com) in your Angular application
- Host: GitHub
- URL: https://github.com/dimaslz/ng-heroicons
- Owner: dimaslz
- Created: 2020-09-27T01:49:40.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-02T22:19:48.000Z (3 months ago)
- Last Synced: 2024-10-11T12:44:47.245Z (3 months ago)
- Topics: angular, components, heroicons, icons, tailwindcss
- Language: HTML
- Homepage: https://ng-heroicons.dimaslz.dev
- Size: 7.26 MB
- Stars: 15
- Watchers: 1
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular - ng-hero-icons - Use [Heroicons](https://heroicons.com) in your Angular application. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-hero-icons - Use 🌎 [Heroicons](heroicons.com) in your Angular application. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-hero-icons - Use 🌎 [Heroicons](heroicons.com) in your Angular application. (Table of contents / Third Party Components)
README
# @dimaslz/ng-heroicons
NgHeroicons just it is a Angular components to use [Heroicons](https://heroicons.com) 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/](https://cli.angular.io/).
Live demo: [https://ng-heroicons.dimaslz.dev](https://ng-heroicons.dimaslz.dev)
## How to install in your project
This package has compatibility with Angular version from 11 to 18.
| 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` | default |
`$ yarn add @dimaslz/ng-heroicons@^XX`
`$ npm install @dimaslz/ng-heroicons@^XX`
```ts
// app.module.ts
import { NgHeroiconsModule } from "@dimaslz/ng-heroicons";
// ...
@NgModule({
// ...
imports: [
CommonModule,
NgHeroiconsModule,
],
// ...
})
//...
```
## How to use
Go to [https://ng-heroicons.dimaslz.dev](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 `` for outline or `` for solid icons. From version **>= 1.18.1** is possible to use the dynamic component ``
You can use your style in line, css or just pass color and size.
```html
```
By using a dynamic component `` (from versions **>= 1.18.1**)
```html
```
## 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 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](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` |
### 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` |
### 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
```js
{
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](https://randomdata.loremapi.io): API mock data (no open source)
- [https://svg-icon-2-fw-component.dimaslz.dev](https://svg-icon-2-fw-component.dimaslz.dev): SVG to Framework component (open source soon)
- [https://ng-heroicons.dimaslz.dev](https://ng-heroicons.dimaslz.dev): Use Heroicons.com in you Angular projects (open source)