0.1.2 • Published 10 months ago
bit-icon v0.1.2
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-iconMethods
| 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();