# vue3-jazzicon

> Vue component for danfinlay/jazzicon

Latest version **0.1.4** (published 2022-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-jazzicon
pnpm add vue3-jazzicon
yarn add vue3-jazzicon
bun add vue3-jazzicon
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2022-08-08 |
| First published | 2021-01-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 218.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | samuveth |
| Maintainers | samuv.eth |
| Keywords | vue, component, jazzicon, ethereum, metamask, identicon |

## Links

- npm: https://www.npmjs.com/package/vue3-jazzicon
- Repository: https://github.com/samuveth/vue3-jazzicon
- Homepage: https://github.com/samuveth/vue3-jazzicon#readme
- Issues: https://github.com/samuveth/vue3-jazzicon/issues
- npm.io page: https://npm.io/package/vue3-jazzicon

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [color](https://npm.io/package/color.md) ^3.1.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [mersenne-twister](https://npm.io/package/mersenne-twister.md) ^1.1.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2022-08-08
- 0.1.2 — 2021-01-02
- 0.1.1 — 2021-01-02
- 0.1.0 — 2021-01-02

## README

[![npm](https://img.shields.io/npm/v/vue-jazzicon.svg)](https://www.npmjs.com/package/vue3-jazzicon)    [![travis](https://img.shields.io/travis/man15h/vue-jazzicon.svg)](https://www.npmjs.com/package/vue3-jazzicon) [![npm](https://img.shields.io/npm/dw/vue-jazzicon.svg)](https://www.npmjs.com/package/vue3-jazzicon) [![npm](https://img.shields.io/npm/l/vue-jazzicon.svg)](https://github.com/man15h/vue3-jazzicon/blob/master/LICENSE)


# 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](public/identicons.png)


## [Demo](https://pedantic-shannon-c0b649.netlify.app/)


## Install

### NPM

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

```js
npm install vue3-jazzicon // yarn add vue3-jazzicon
```

## Quick start

### Vite

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

### Global

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

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

app.component('jazzicon', Jazzicon);
```

```html
<!-- App.vue -->
<template>
    <jazzicon address="0xccf7f134cd45865a5afd5a3a92b969228ce9a3e6" :diameter="100" />
</template>
```

### On demand

```html
<!-- 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

| 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) license.

---
_Source: https://npm.io/package/vue3-jazzicon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._