https://github.com/dmester/ngx-jdenticon

Angular directives used to generate identicons using Jdenticon.
https://github.com/dmester/ngx-jdenticon

angular angular-directives avatar identicons jdenticon

Last synced: 12 months ago
JSON representation

Angular directives used to generate identicons using Jdenticon.

• Host: GitHub
• URL: https://github.com/dmester/ngx-jdenticon
• Owner: dmester
• License: mit
• Created: 2020-08-01T13:14:19.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T19:06:17.000Z (about 3 years ago)
• Last Synced: 2024-04-24T18:10:29.634Z (almost 2 years ago)
• Topics: angular, angular-directives, avatar, identicons, jdenticon
• Language: TypeScript
• Homepage: https://jdenticon.com/
• Size: 1.55 MB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ngx-jdenticon

Angular directives used to generate identicons using [Jdenticon](https://github.com/dmester/jdenticon).

![Sample identicons](https://jdenticon.com/hosted/github-samples.png)

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/dmester/ngx-jdenticon/build.js.yml?branch=master&style=flat-square)](https://github.com/dmester/ngx-jdenticon/actions)

[![Downloads](https://img.shields.io/npm/dt/ngx-jdenticon.svg?style=flat-square)](https://www.npmjs.com/package/ngx-jdenticon)

[![License MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/dmester/ngx-jdenticon/blob/master/LICENSE)

🚀 [Sample app at StackBlitz](https://stackblitz.com/edit/ngx-jdenticon-sample)

## Install

Install the [ngx-jdenticon](https://www.npmjs.com/package/ngx-jdenticon) and [jdenticon](https://www.npmjs.com/package/jdenticon) NPM packages.

```sh

npm install --save ngx-jdenticon jdenticon

```

Import `NgxJdenticonModule` into your `app.module.ts` (or another module).

```ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { NgxJdenticonModule } from 'ngx-jdenticon'; // <--- Add

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    NgxJdenticonModule, // <--- Add

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

Add an icon by decorating either an `` or `` element with the 

[`data-jdenticon-value`](https://jdenticon.com/js-api/A_data-jdenticon-value.html) or

[`data-jdenticon-hash`](https://jdenticon.com/js-api/A_data-jdenticon-hash.html)

attribute.

```html

```

## Customize look

If 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.

Icon style configurations are applied by adding a provider for the `JDENTICON_CONFIG` injection token.

```ts

import { NgxJdenticonModule, JDENTICON_CONFIG } from 'ngx-jdenticon';

@NgModule({

  declarations: [

    AppComponent,

  ],

  imports: [

    BrowserModule,

    NgxJdenticonModule,

  ],

  providers: [

    { 

      // Custom identicon style

      // https://jdenticon.com/icon-designer.html?config=222222ff014132321e363f52

      provide: JDENTICON_CONFIG,

      useValue: {

        lightness: {

          color: [0.31, 0.54],

          grayscale: [0.63, 0.82],

        },

        saturation: {

          color: 0.50,

          grayscale: 0.50,

        },

        backColor: '#222',

      },

    }

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

🚀 [Run on StackBlitz](https://stackblitz.com/edit/ngx-jdenticon-custom-design?file=src%2Fapp%2Fapp.module.ts)

## See also

[Jdenticon homepage](https://jdenticon.com)