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

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" />
  );
};