Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

blo

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

blo

blo is a small and fast library to generate Ethereum identicons.

  • 1.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5.3K
decreased by-44.07%
Maintainers
1
Weekly downloads
 
Created
Source
blo
blo is a small and fast library to generate Ethereum identicons.

npm version bundle size License

Features

  • 🐥 Small: 0.67 KB gzipped.
  • 💥 Fast: 3.5x faster than the second fastest solution.
  • 🔍 Optimized: Leverages SVG to generate compact and sharp images at any size.
  • 💆 Simple: Focuses on Ethereum identicons only, allowing for a simpler API.
  • 🗂 Typed: Ships with types included.
  • 👫 Works everywhere: browsers, Bun, Node.js.
  • ☁️ Zero dependencies.

Library Comparison

LibraryRenders/sec1SizeTypesEnvironment2Rendering
blo💥 8,197SVG
ethereum-blockies-base64807PNG
blockies-react-svg1,749SVG
@download/blockies334Canvas
blockies-ts342Canvas
react-blockies2,361Canvas

Getting Started

npm i -S blo
pnpm add blo
yarn add blo
import { blo } from "blo";

img.src = blo("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");

React / Vue / Others

blo is fast enough to not require memoization or async rendering for common use cases.

function AddressIcon({ address }: { address: `0x${string}` }) {
  return (
    <img
      alt={address}
      src={blo(address)}
    />
  );
}

API

blo(address: Address, size = 64): string

Get a data URI string representing the identicon as an SVG image.

The size paramater shouldn’t usually be needed, as the image will stay sharp no matter what the size of the img element is.

Example:

import { blo } from "blo";

img.src = blo(address); // size inside the SVG defaults to 64px
img2.src = blo(address, 24); // set it to 24px
bloSvg(address: Address, size = 64): string

Same as above except it returns the SVG code instead of a data URI string.

bloImage(address: Address): BloImage

Get a BloImage data structure that can be used to render the image in different formats.

See src/svg.ts for an example of how to use it.

Types

The library ships with TypeScript types included.

// BloImage contains the data needed to render an icon.
export type BloImage = [BloImageData, Palette];

// 4x8 grid of the image left side, as 32 PaletteIndex items.
// The right side is omitted as it's a mirror of the left side.
export type BloImageData = Uint8Array;

// Colors used by a given icon.
export type Palette = [
  Hsl, // background
  Hsl, // color
  Hsl, // spot
];

// Points to one of the three Palette colors.
export type PaletteIndex =
  | 0 // background
  | 1 // color
  | 2; // spot

// A color in the HSL color space.
// [0]: 0-360 (hue)
// [1]: 0-100 (saturation)
// [2]: 0-100 (lightness)
export type Hsl = Uint16Array;

// An Ethereum address.
export type Address = `0x${string}`;

Acknowledgements

FAQ

Does it follow the exact same algorithm as Etherscan, MetaMask and others?

Yes.

Does it work with ENS names?

No it only works with Ethereum addresses, but you can resolve the ENS name to an address (e.g. with wagmi) and pass the result to blo.

Can blo render other formats than SVG?

You can render to any format you want by using the bloImage() function, which returns a data structure (see API above). Check out the Bun and Node demos for examples of rendering an identicon in the terminal.

Ethereum identicon rendered in the terminal

Can it be used to generate other types of identicons?

blo only focuses on the Ethereum identicons algorithm but you can use it with any data, just prefix it with 0x to fulfill the expected Address type if you are using TypeScript.

Why is it named blo?

blo is short for blockies, which is the name of the original library it is based on.

License

MIT

Footnotes

  1. The number of renders per second. It was measured on Chrome 117 Linux with an AMD Ryzen 7 PRO 4750U. See ./benchmark for the methodology.

  2. The term “all” refers to libraries that are framework agnostic and that run in browsers, Bun and Node.js.

Keywords

FAQs

Package last updated on 08 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc