bit-icon

Generate 8-bit style icons like the initial GitHub icons. SVG and PNG support.

Demo

You can try it here.

Installation

npm install bit-icon

Methods

Name	Type	Description	Example
toSvg()	string	Output Base64-encoded SVG in DataURI	data:image/svg+xml;base64,PHN2Zz ...
toPng()	Promise<string>	Output Base64-encoded PNG in DataURI	data:image/png;base64,iVBORw0KGU ...

Options

Name	Type	Default	Description
hash	string		A hexadecimal string of 22 or more characters used to generate image.If none, it is randomly generated.
size	number	420	The width and height of the image to be generated.
pixel	number	70	The size of a single pixel of the icon to be generated.Note that the pixel should be no larger than 1/5 of the size to avoid overflowing.
color	string		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,RGB,HSL,HSB. (e.g. #FF0000 or rgb(255,0,0) or hsl(0,100,50) or rgb(0,100,100) for red).
background	string	#FFFFFF	Used as the background color of the generated image; use Hex,RGB,HSL,HSB. (e.g. #FF0000 or rgb(255,0,0) or hsl(0,100,50) or rgb(0,100,100) for red).
hue	number[]	[0,360]	Used as a range of hue in HSL colors calculated from the hash.
saturation	number[]	[45,65]	Used as a range of saturation in HSL colors calculated from the hash.
lightness	number[]	[55,75]	Used as a range of lightness in HSL colors calculated from the hash.
type	'normal' | 'reverse'| 'random'	"normal"	It is used to fill in the color of the image to be generated. "normal" has a white background and colored body. "reverse" is the reverse of "normal". "random" is just as the name implies.

Usage

import

import  { BitIcon }  from "bit-icon";

Simple

const bitIcon = new BitIcon();
const svg = bitIcon.toSvg();

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

Custom

import  { BitIcon, Options }  from "bit-icon";

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

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