Skip to content
A dead-simple jazzicon component for VueJS
Branch: master
Clone or download
Latest commit 530319d Mar 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public badges and demo page prerendered Mar 16, 2019
src console log removes Mar 16, 2019
tests/unit shape-count and colors props added, other fixes Mar 16, 2019
.editorconfig shape-count and colors props added, other fixes Mar 16, 2019
.eslintrc.js shape-count and colors props added, other fixes Mar 16, 2019
.gitignore .gitignore fix Mar 16, 2019
.prettierrc initial commit Mar 15, 2019
.travis.yml component registration fixes Mar 15, 2019
LICENSE
README.md badges and demo page prerendered Mar 16, 2019
babel.config.js initial commit Mar 15, 2019
jest.config.js shape-count and colors props added, other fixes Mar 16, 2019
package.json badges and demo page prerendered Mar 16, 2019
vue.config.js badges and demo page prerendered Mar 16, 2019
yarn.lock badges and demo page prerendered Mar 16, 2019

README.md

npm travis npm npm

vue-jazzicon

A dead-simple Jazzicon component for Vue.

Say goodbye to boring blocky identicons that look like they came out of the 70s, and replace them with jazzy, colorful collages that more likely came out of the 80's

Jazzicon

Demo

Install

NPM

Installing with npm is recommended and it works seamlessly with webpack.

npm install vue-jazzicon // yarn add vue-jazzicon

Quick start

Global

To use in your project, just import jazzicon and install into Vue.

main.js

import Vue from 'vue';
import Jazzicon from 'vue-jazzicon';

Vue.component('jazzicon', Jazzicon); // or Vue.component(Jazzicon.name, Jazzicon);

App.vue

<template>
    <jazzicon address="0xccf7f134cd45865a5afd5a3a92b969228ce9a3e6" :diameter="100" />
</template>

On demand

<template>
    <jazzicon :seed="10211" :diameter="100" />
</template>

<script>
  import Jazzicon from 'vue-jazzicon'

  export default {
    components: {
      [Jazzicon.name]: Jazzicon
    }
  }
</script>

Props

Name Description Type Default Accepted values
seed Seed for the icon Number Random Number Only positive integer
address Address for the icon String - Hex string
diameter Diameter of icon Number 100 Positive integer
shape-count Number of shapes Number 4 Positive integer
colors Colors for icon Array See Below Array of Hex color code

Default Colors

[
    '#01888C', // teal
    '#FC7500', // bright orange
    '#034F5D', // dark teal
    '#F73F01', // orangered
    '#FC1960', // magenta
    '#C7144C', // raspberry
    '#F3C100', // goldenrod
    '#1598F2', // lightning blue
    '#2465E1', // sail blue
    '#F19E02' // gold
]

License

MIT license.

You can’t perform that action at this time.