https://github.com/man15h/vue-jazzicon
A dead-simple jazzicon component for VueJS
https://github.com/man15h/vue-jazzicon
component ethereum jazzicon metamask vuejs
Last synced: 2 months ago
JSON representation
A dead-simple jazzicon component for VueJS
- Host: GitHub
- URL: https://github.com/man15h/vue-jazzicon
- Owner: man15h
- License: mit
- Created: 2019-03-15T15:47:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-16T14:08:38.000Z (over 6 years ago)
- Last Synced: 2024-04-13T12:48:10.263Z (over 1 year ago)
- Topics: component, ethereum, jazzicon, metamask, vuejs
- Language: Vue
- Homepage:
- Size: 811 KB
- Stars: 44
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/vue-jazzicon) [](https://www.npmjs.com/package/vue-jazzicon) [](https://www.npmjs.com/package/vue-jazzicon) [](https://github.com/man15h/vue-jazzicon/blob/master/LICENSE)
# 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
## [Demo](https://vue-jazzicon.netlify.com/)
## Install
### NPM
Installing with npm is recommended and it works seamlessly with webpack.
```js
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
```js
import Vue from 'vue';
import Jazzicon from 'vue-jazzicon';
Vue.component('jazzicon', Jazzicon); // or Vue.component(Jazzicon.name, Jazzicon);
```
App.vue
```html
```
### On demand
```html
import Jazzicon from 'vue-jazzicon'
export default {
components: {
[Jazzicon.name]: Jazzicon
}
}
```
## 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.