github-icon

Generate an identicon like GitHub. SVG and PNG support.

Installation

npm install github-icon

Methods

toSvg()

Output Base64-encoded SVG in DataURI

data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcv ...

toPng()

Output Base64-encoded PNG in DataURI

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAGkCAMAAABJkqEH ...

Options

• hash - [Optional] A hexadecimal string of 22 or more characters used to generate image.
• options - [Optional] An options object used to customize the generated image.
  • size - Specifies the width and height of the generated image. The default is 420 pixels.
  • pixel - Specifies the size of a single block that makes up the icon. The default is 70 pixels. Note that the pixel should be no larger than 1/5 of the size to avoid overflowing.
  • color - The color of the icon is calculated from the hash value. Use this option to disable that behavior and use the specified color instead. Use Hex or HSL. (e.g. #FF0000 or [0,100,50] for red).
  • background - Specifies the background color to be used for the image background; use Hex or HSL. (e.g. #FF0000 or [0,100,50] for red). Default is white #F0F0F0.
  • hue - Specifies the range of hue in HSL for calculating the color from the hash value as an array. Default is 0-360 [0,360].
  • saturation - Specifies the range of saturation in HSL for calculating the color from the hash value as an array. Default is 45-65 [45,65].
  • lightness - Specifies the range of lightness in HSL for calculating the color from the hash value as an array. Default is 55-75 [55,75].
  • type - Specifies how colors are applied when generating the image. "normal" has a white background and colored body. "reverse" is the reverse of "normal". "random" is just as the name implies. The default is "normal".

Usage

import

import  { GitHubIcon }  from "github-icon";

Simple to use

const gitHubIcon = new GitHubIcon();
const svg = gitHubIcon.toSvg();

// If you use it in HTML
const img = document.createElement('img');
img.src = svg;
document.body.appendChild(img);

Custom and use

import  { GitHubIcon, Options }  from "github-icon";

// Must be at least 22 characters in hexadecimal, such as MD5.
const hash = 'd41d8cd98f00b204e9800998ecf8427e'
const options: Options = {
    size: 100,
    pixel: 15,
    color: [215, 25, 27],
    background: [214, 32, 91],
    hue: [100, 300],
    saturation: [10, 70],
    lightness: [20, 80],
    type: 'reverse'
  };
const gitHubIcon = new GitHubIcon(hash, options);
const png = gitHubIcon.toPng();

// If you want to download
const link = document.createElement('a');
link.download = 'sample.png';
link.href = png;
link.click();