danfinlay / jazzicon Goto Github PK
View Code? Open in Web Editor NEWJazzy deterministic identicons for a more entertaining future.
License: ISC License
Jazzy deterministic identicons for a more entertaining future.
License: ISC License
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?
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)
position: relative
, border radius does not work. Icons are square instead of rounded.border-radius
appears to be getting overridden to 0 by css reset, but deleting our reset.(s)css
does not have any effect..gif
: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!
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);
}
}
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
Hello, as you can see in the following screenshot, when the diameter is greater than 100px, the jazzicon is not full with the wrapper.
Hi, great project!
Would you please kindly add license pls?
Thanks!
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.