{"id":13311721,"url":"https://github.com/dmester/ngx-jdenticon","last_synced_at":"2025-04-15T10:29:20.601Z","repository":{"id":50792619,"uuid":"284262954","full_name":"dmester/ngx-jdenticon","owner":"dmester","description":"Angular directives used to generate identicons using Jdenticon.","archived":false,"fork":false,"pushed_at":"2023-03-04T19:06:17.000Z","size":1623,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T18:10:29.634Z","etag":null,"topics":["angular","angular-directives","avatar","identicons","jdenticon"],"latest_commit_sha":null,"homepage":"https://jdenticon.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmester.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-08-01T13:14:19.000Z","updated_at":"2024-06-19T15:01:05.298Z","dependencies_parsed_at":"2024-06-19T15:00:46.791Z","dependency_job_id":"7c018348-dd35-437a-8efc-0f117851f874","html_url":"https://github.com/dmester/ngx-jdenticon","commit_stats":{"total_commits":38,"total_committers":3,"mean_commits":"12.666666666666666","dds":"0.39473684210526316","last_synced_commit":"85e954b497f20abaf709758dabfdee5dbc10cdc0"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmester%2Fngx-jdenticon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmester%2Fngx-jdenticon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmester%2Fngx-jdenticon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmester%2Fngx-jdenticon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmester","download_url":"https://codeload.github.com/dmester/ngx-jdenticon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249051186,"owners_count":21204774,"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","angular-directives","avatar","identicons","jdenticon"],"created_at":"2024-07-29T18:02:21.788Z","updated_at":"2025-04-15T10:29:20.568Z","avatar_url":"https://github.com/dmester.png","language":"TypeScript","readme":"# ngx-jdenticon\n\nAngular directives used to generate identicons using [Jdenticon](https://github.com/dmester/jdenticon).\n\n![Sample identicons](https://jdenticon.com/hosted/github-samples.png)\n\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/dmester/ngx-jdenticon/build.js.yml?branch=master\u0026style=flat-square)](https://github.com/dmester/ngx-jdenticon/actions)\n[![Downloads](https://img.shields.io/npm/dt/ngx-jdenticon.svg?style=flat-square)](https://www.npmjs.com/package/ngx-jdenticon)\n[![License MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/dmester/ngx-jdenticon/blob/master/LICENSE)\n\n🚀 [Sample app at StackBlitz](https://stackblitz.com/edit/ngx-jdenticon-sample)\n\n## Install\n\nInstall the [ngx-jdenticon](https://www.npmjs.com/package/ngx-jdenticon) and [jdenticon](https://www.npmjs.com/package/jdenticon) NPM packages.\n\n```sh\nnpm install --save ngx-jdenticon jdenticon\n```\n\nImport `NgxJdenticonModule` into your `app.module.ts` (or another module).\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { NgxJdenticonModule } from 'ngx-jdenticon'; // \u003c--- Add\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    NgxJdenticonModule, // \u003c--- Add\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nAdd an icon by decorating either an `\u003csvg\u003e` or `\u003ccanvas\u003e` element with the \n[`data-jdenticon-value`](https://jdenticon.com/js-api/A_data-jdenticon-value.html) or\n[`data-jdenticon-hash`](https://jdenticon.com/js-api/A_data-jdenticon-hash.html)\nattribute.\n\n```html\n\u003csvg width=\"100\" height=\"100\" data-jdenticon-value=\"John Doe\"\u003e\u003c/svg\u003e\n```\n\n## Customize look\n\nIf you don't like the default colors, use the [icon designer](https://jdenticon.com/icon-designer.html) to customize the look of identicons generated by ngx-jdenticon.\n\nIcon style configurations are applied by adding a provider for the `JDENTICON_CONFIG` injection token.\n\n```ts\nimport { NgxJdenticonModule, JDENTICON_CONFIG } from 'ngx-jdenticon';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule,\n    NgxJdenticonModule,\n  ],\n  providers: [\n    { \n      // Custom identicon style\n      // https://jdenticon.com/icon-designer.html?config=222222ff014132321e363f52\n      provide: JDENTICON_CONFIG,\n      useValue: {\n        lightness: {\n          color: [0.31, 0.54],\n          grayscale: [0.63, 0.82],\n        },\n        saturation: {\n          color: 0.50,\n          grayscale: 0.50,\n        },\n        backColor: '#222',\n      },\n    }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n🚀 [Run on StackBlitz](https://stackblitz.com/edit/ngx-jdenticon-custom-design?file=src%2Fapp%2Fapp.module.ts)\n\n## See also\n\n[Jdenticon homepage](https://jdenticon.com)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmester%2Fngx-jdenticon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmester%2Fngx-jdenticon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmester%2Fngx-jdenticon/lists"}