Skip to content

HerrBertling/vue-blockies

Repository files navigation

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>