Opepen Standard

A tiny library for generating opepen identicons.

Sample blockies image

Browser

Install

npm i opepen-standard


import { createIcon } from 'opepen-standard';

var icon = createIcon({ // All options are optional
    seed: 'randstring', // seed used to generate icon data, default: random
    color: '#dfe', // optional
    bgcolor: '#aaa', // optional
    size: 32, // width/height of the icon in blocks, default: 32
});

document.body.appendChild(icon); // icon is a canvas element

React

import React from 'react';

import { createIcon } from 'opepen-standard';

export const OpepenAvatar: React.FC<{ address: string; size: number }> = ({ address, size }) => {
  const canvas = createIcon({
    seed: address,
    size,
  });

  return (
    <img src={canvas.toDataURL()} alt="Opepen Avatar" />
  );
};

Notes

Always use a size that is dividable by 8, otherwise the opepens will not render as well. As the default Opepen grid is 8×8.

Build

npm run build

License

WTFPL

GitHub

View Github