{"id":13808616,"url":"https://github.com/dimaslz/ng-heroicons","last_synced_at":"2025-03-16T12:31:53.266Z","repository":{"id":37862522,"uuid":"298931921","full_name":"dimaslz/ng-heroicons","owner":"dimaslz","description":"Use Heroicons (https://heroicons.com) in your Angular application ","archived":false,"fork":false,"pushed_at":"2024-12-11T07:26:24.000Z","size":8220,"stargazers_count":15,"open_issues_count":8,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T19:48:26.926Z","etag":null,"topics":["angular","components","heroicons","icons","tailwindcss"],"latest_commit_sha":null,"homepage":"https://ng-heroicons.dimaslz.dev","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimaslz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-27T01:49:40.000Z","updated_at":"2024-10-02T22:19:52.000Z","dependencies_parsed_at":"2024-06-21T15:36:28.992Z","dependency_job_id":null,"html_url":"https://github.com/dimaslz/ng-heroicons","commit_stats":{"total_commits":290,"total_committers":4,"mean_commits":72.5,"dds":0.4896551724137931,"last_synced_commit":"078d1401e3f46f0489b2ff89cc8d2bd4352d4982"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fng-heroicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fng-heroicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fng-heroicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fng-heroicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimaslz","download_url":"https://codeload.github.com/dimaslz/ng-heroicons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814880,"owners_count":20352037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","components","heroicons","icons","tailwindcss"],"created_at":"2024-08-04T01:01:47.482Z","updated_at":"2025-03-16T12:31:52.599Z","avatar_url":"https://github.com/dimaslz.png","language":"HTML","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Icons"],"readme":"# @dimaslz/ng-heroicons\n\n\u003cimg src='https://track.dimaslz.dev/track?name=github\u0026url=https://ng-heroicons.dimaslz.dev\u0026domain=ng-heroicons.dimaslz.dev\u0026props={\"readme\":\"main\"}' alt=\"track\" width=\"0px\" height=\"0px\" /\u003e\n\nNgHeroicons just it is a Angular components to use [Heroicons](https://heroicons.com) in your projects. I hope that could be useful.\n\nIf you want to know how is working Angular CLI follow this [https://cli.angular.io/](https://cli.angular.io/).\n\nLive demo: [https://ng-heroicons.dimaslz.dev](https://ng-heroicons.dimaslz.dev)\n\n## How to install in your project\n\nThis package has compatibility with Angular version from 11 to 18.\n\n| angular version | package version ||\n|-|-|-|\n| 11.x.x | `^1.11.*` ||\n| 12.x.x | `^1.12.*` ||\n| 13.x.x | `^1.13.*` ||\n| 14.x.x | `^1.14.*` ||\n| 15.x.x | `^1.15.*` ||\n| 16.x.x | `^1.16.*` ||\n| 17.x.x | `^1.17.*` ||\n| 18.x.x | `^1.18.0` ||\n|        | `^1.18.1` ||\n|        | `^1.18.2` | default |\n\n`$ yarn add @dimaslz/ng-heroicons@^XX`\n\n`$ npm install @dimaslz/ng-heroicons@^XX`\n\n```ts\n// app.module.ts\nimport { NgHeroiconsModule } from \"@dimaslz/ng-heroicons\";\n// ...\n\n@NgModule({\n  // ...\n  imports: [\n    CommonModule,\n    NgHeroiconsModule,\n  ],\n  // ...\n})\n\n//...\n```\n\n## How to use\n\nGo 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 `\u003cacademic-cap-outline-icon\u003e\u003c/academic-cap-outline-icon\u003e` for outline or `\u003cacademic-cap-solid-icon\u003e\u003c/academic-cap-solid-icon\u003e` for solid icons. From version **\u003e= 1.18.1** is possible to use the dynamic component `\u003cng-heroicons icon=\"...\" /\u003e`\n\nYou can use your style in line, css or just pass color and size.\n\n```html\n\u003c!-- using style in line (style for color will affect to svg) --\u003e\n\u003cacademic-cap-outline-icon style=\"color: red;\"\u003e\u003c/academic-cap-outline-icon\u003e\n\n\u003c!-- using css classes (class for color will affect to svg) --\u003e\n\u003cacademic-cap-outline-icon class=\"text-red-400\"\u003e\u003c/academic-cap-outline-icon\u003e\n\n\u003c!-- pass color or size --\u003e\n\u003cacademic-cap-outline-icon size=\"48\" color=\"red\"\u003e\u003c/academic-cap-outline-icon\u003e\n\n\u003c!-- To apply specific style to the SVG, use `svgStyle` --\u003e\n\u003cacademic-cap-outline-icon svgStyle=\"color: red;\"\u003e\u003c/academic-cap-outline-icon\u003e\n\n\u003c!-- To apply specific css to the SVG, use `svgClass` --\u003e\n\u003cacademic-cap-outline-icon svgClass=\"your-class-for-the-svg\"\u003e\u003c/academic-cap-outline-icon\u003e\n```\n\nBy using a dynamic component `\u003cng-heroicons ... icon=\"...\" /\u003e` (from versions **\u003e= 1.18.1**)\n\n```html\n\u003c!-- force to render outline icon --\u003e\n\u003cng-heroicons icon=\"academic-cap\" outline /\u003e\n\n\u003c!-- force to render solid icon --\u003e\n\u003cng-heroicons icon=\"academic-cap\" solid /\u003e\n\n\u003c!-- using style --\u003e\n\u003cng-heroicons icon=\"academic-cap\" style=\"color: red;\" /\u003e\n\n\u003c!-- using css classes (class for color will affect to svg) --\u003e\n\u003cng-heroicons icon=\"academic-cap\" class=\"text-red-400\" /\u003e\n\n\u003c!-- pass color or size --\u003e\n\u003cng-heroicons icon=\"academic-cap\" size=\"48\" color=\"red\" /\u003e\n\n```\n\n## Development\n\nThis 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.\n\n### Landing\n\nLanding page is the common landing \u003chttps://ng-heroicons.dimaslz.dev/\u003e which is using the last Angular version.\n\n- Build the Angular 14 lib: `$ yarn --cwd=packages/angular-v14 build lib -c production`\n- Refresh the distribution content in `dist/v14`: `$ yarn v14-copy-release`\n- Install Landing packages: `$ yarn --cwd=landing install`\n- Run project: `$ yarn --cwd=landing start`\n- Join the page in [http://localhost:4200](http://localhost:4200)\n\n### Build library per version\n\nKeep in mind, first you should build the `lib` package\n\n| angular version | command |\n|-|-|\n| angular 11 | `$ yarn --cwd=packages/angular-v11 build lib -c production` |\n| angular 12 | `$ yarn --cwd=packages/angular-v12 build lib -c production` |\n| angular 13 | `$ yarn --cwd=packages/angular-v13 build lib -c production` |\n| angular 14 | `$ yarn --cwd=packages/angular-v14 build lib -c production` |\n| angular 15 | `$ yarn --cwd=packages/angular-v15 build lib -c production` |\n| angular 16 | `$ yarn --cwd=packages/angular-v16 build lib -c production` |\n| angular 17 | `$ yarn --cwd=packages/angular-v17 build lib -c production` |\n| angular 18 | `$ yarn --cwd=packages/angular-v18 build lib -c production` |\n\n### Run playground per version\n\nKeep 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.\n\n| angular version | command |\n|-|-|\n| angular 11 | `$ yarn --cwd=packages/angular-v11 start playground` |\n| angular 12 | `$ yarn --cwd=packages/angular-v12 start playground` |\n| angular 13 | `$ yarn --cwd=packages/angular-v13 start playground` |\n| angular 14 | `$ yarn --cwd=packages/angular-v14 start playground` |\n| angular 15 | `$ yarn --cwd=packages/angular-v15 start playground` |\n| angular 16 | `$ yarn --cwd=packages/angular-v16 start playground` |\n| angular 17 | `$ yarn --cwd=packages/angular-v17 start playground` |\n| angular 18 | `$ yarn --cwd=packages/angular-v18 start playground` |\n\n### Regenerate components\n\n`$ 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`\n\n## Build heroicons\n\n`$ yarn build --prod ng-heroicons`\n\n## Author\n\n```js\n{\n  name: \"Dimas López\",\n  role: \"FullStack Software Engineer\",\n  alias: \"dimaslz\",\n  twitter: \"https://twitter.com/dimaslz\",\n  site: \"https://dimaslz.com\",\n  linkedin: \"https://www.linkedin.com/in/dimaslopezzurita\"\n}\n```\n\n## My other projects\n\n- [https://randomdata.loremapi.io](https://randomdata.loremapi.io): API mock data (no open source)\n- [https://svg-icon-2-fw-component.dimaslz.dev](https://svg-icon-2-fw-component.dimaslz.dev): SVG to Framework component (open source soon)\n- [https://ng-heroicons.dimaslz.dev](https://ng-heroicons.dimaslz.dev): Use Heroicons.com in you Angular projects (open source)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimaslz%2Fng-heroicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimaslz%2Fng-heroicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimaslz%2Fng-heroicons/lists"}