0.1.4 • Published 2 years ago

vue3-jazzicon v0.1.4

Weekly downloads
216
License
MIT
Repository
github
Last release
2 years ago

npm travis npm npm

vue3-jazzicon

A dead-simple Jazzicon component for Vue 3.

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 vue3-jazzicon // yarn add vue3-jazzicon

Quick start

Vite

// vite.config.ts
include: ['color', 'mersenne-twister']

Global

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

// main.js
import Jazzicon from 'vue3-jazzicon/src/components';

app.component('jazzicon', Jazzicon);
<!-- App.vue -->
<template>
    <jazzicon address="0xccf7f134cd45865a5afd5a3a92b969228ce9a3e6" :diameter="100" />
</template>

On demand

<!-- Inside your component -->
<template>
    <jazzicon :seed="10211" :diameter="100" />
</template>

<script>
  import Jazzicon from 'vue3-jazzicon/src/components'

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

Props

NameDescriptionTypeDefaultAccepted values
seedSeed for the iconNumberRandom NumberOnly positive integer
addressAddress for the iconString-Hex string
diameterDiameter of iconNumber100Positive integer
shape-countNumber of shapesNumber4Positive integer
colorsColors for iconArraySee BelowArray 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.