danfinlay / jazzicon

Jazzy deterministic identicons for a more entertaining future.

Jazzicon

Jazzy Identicons

Live Example

Say goodbye to boring blocky identicons that look like they came out of the 70s, and replace them with jazzy, colorful collages that more likely came out of the 80's.

Installation

npm install jazzicon -S

Usage

Takes a pixel diameter and a javascript integer (seeds the shape), and gives you back a DOM element to use as you wish!

var jazzicon = require('jazzicon')

var body = document.querySelector('body')
for(var i = 0; i < 60; i++) {
  var el = jazzicon(100, Math.round(Math.random() * 10000000))
  body.appendChild(el)
}

Example

You can run an example by installing beefy (npm i -g beefy) and then running npm run sample.

jazzicon's Issues

Create an angular component

Hi,

thanks a lot for your lib.

Here is a working code in our app for angular. Might be helpful to have a package with angular. It does already exist for react.

import { AfterViewInit, Component, Input, Renderer2, ViewChild } from '@angular/core';
import jazzicon from 'jazzicon';

// example <angular-jazzicon seed="'zefozenfioeznfze'" ></angular-jazzicon>

@Component({
  selector: 'angular-jazzicon',
  template: '<div #jazziconElement></div>'
})
export class JazziconComponent implements AfterViewInit {
  @Input('seed') seed:string|number;
  @Input('size') size:number=100;
  @ViewChild('jazziconElement', { static: true })jazziconElement;

  constructor (private renderer:Renderer2) {}

  ngAfterViewInit (): void {
    let seedInteger = this.seed;
    if (typeof this.seed === 'string') {
      seedInteger = JazziconComponent.jsNumberForAddress(this.seed);
    }
    const value = jazzicon(this.size, seedInteger);
    this.renderer.appendChild(this.jazziconElement.nativeElement, value);
  }

  private static jsNumberForAddress (address) {
    const addr = address.slice(2, 10);
    return parseInt(addr, 16);
  }
}

Not circular for diameter > 100px

Using [email protected], when I try

const diameter = 120;
const el = jazzicon(diameter, Math.round(Math.random() * 10000000));

the resulting element has rounded corners but isn't a circle. It looks like paper.js always sets border-radius to '50px'. Instead, should border-radius be '' + diameter / 2 + 'px' or '9999px' or something similar to allow circles > 100px?

Unexpected behavior: position: relative on ancestor affects border-radius

Expected Behavior: jazzicons should function as isolated components, style of wrapper elements shouldn't affect behavior (for example, application of key styles like border-radius).

Current Behavior: (exploration was timeboxed to 30mins, didn't dig too deep into lib code)

• When an Identicon is rendered as a descendant of an element with position: relative, border radius does not work. Icons are square instead of rounded.
• Examining dev tools, border-radius appears to be getting overridden to 0 by css reset, but deleting our reset.(s)css does not have any effect.
• (Here's the weird part...) Rendering another Identicon as a sibling to the ancestor also somehow fixes the problem for both Identicons. See .gif:
  
• Starts by rendering two, rounded/'fixed'
• Comment out the sibling of relatively positioned ancestor...refresh.
• Border Radius no longer applies.

Status:
I was able to fix with this change, by isolating my use of position: relative to avoid touching the Identicon. Flagging in case it'll be useful for others using this lib. This linked commit also constitutes reproduction steps: check out the commit before it, and npm run dev -- the main icon should be square instead of rounded.

@FlySwatter - I should point out: this issue might have more to do with identicon/icon factory code then jazzicon, but I figured this was the best place to document. Let me know what you think. Thanks!

No circular icon when the diameter is greater than 100px

Hello, as you can see in the following screenshot, when the diameter is greater than 100px, the jazzicon is not full with the wrapper.

https://share.getcloudapp.com/d5u60qk1

LICENSE

Hi, great project!
Would you please kindly add license pls?
Thanks!

Creating a pure SVG version

It looks like currently, Jazzicon requires the DOM APIs, such as createElementNS, appendChild, ... etc.
This means that the library can only be used in the context of a web browser, even though in theory, the SVG string could be used in other contexts (such as generated on the backend...)

I quickly peaked through the code but could not see an easy way to generate a "svg string". Maybe I missed something?

Updated Live Demo

Noticed that the current Live Demo link was broken, so here is a quick view of how it looks:

https://codesandbox.io/s/nervous-monad-zg3vb?file=/src/index.js