vue-blockies

This is a simple Vue3 wrapper component for ethereum-blockies.

Installation

yarn add vue-blockies

or

npm i vue-blockies

Usage

Import the component, make it known to the component you're using it in.

import VueBlockies from vue-blockies

export default {
  name: 'MyAwesomeComponent',

  components: {
    VueBlockies,
  },
  …
}

In the template, just™ use it.

<template>
  <div>
    …
    <VueBlockies />
    …
  </div>
</template>

Props

Prop	Type	Default value	Description
seed	String	"randomString"	Seed used to generate icon data
color	String	"#dfe"	To manually specify the icon color
bgcolor	String	#aaa	Choose a different background color
size	String	8	Width/height of the icon in blocks
scale	Number	4	Width/height of each block in pixels.
spotColor	String	#000	Each pixel has a 13% chance of being of a third color. Set to -1 to disable it. These "spots" create structures that look like eyes, mouths and noses.

Full example

<template>
  <div>
    …
    <VueBlockies
      seed="0x4f5F6D3c7e8aDef6be8e51288F098d440bAc12ec"
      color="#09e"
      bgcolor="#f3f"
      :size="16"
      :scale="2"
      spot-color="#666"
    />
    …
  </div>
</template>