https://github.com/afa7789/blockiesvue
A minimal library, that enables the usage of ethereum-blockies on vue.js & nuxt
https://github.com/afa7789/blockiesvue
blockies component ethereum vue
Last synced: 4 months ago
JSON representation
A minimal library, that enables the usage of ethereum-blockies on vue.js & nuxt
- Host: GitHub
- URL: https://github.com/afa7789/blockiesvue
- Owner: afa7789
- License: other
- Created: 2022-06-10T17:53:18.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-06-20T00:15:23.000Z (over 3 years ago)
- Last Synced: 2025-04-09T04:51:16.475Z (9 months ago)
- Topics: blockies, component, ethereum, vue
- Language: Vue
- Homepage: https://afa7789.com/blockies-vue-demo
- Size: 82 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blockies Vue
Implementation of the [EthereumBlockies](https://github.com/ethereum/blockies) on Vue.js.
Depending on where you're using the original blockies on vue or other project I was getting some errors so I just gave up and turned it entirely into a vue code.
Blockies
========
_ contain strips from the original readme of the project_
A tiny library for generating identicons for Ethereum addresses. These are not meant to replace user profiles, but as security icons, to allow the user to more easily check if an address he wants to interact with is the correct one. The symmetrical aspect of the icons allow our brain see [faces or objects](https://en.wikipedia.org/wiki/Pareidolia), making the icon more recognizable. This also contains the HQX library, for optionally creating not-so-blocky icons (see sample below).
Check an example here [./example/example.vue](https://github.com/afa7789/BlockiesVue/blob/master/example/example.vue)
[**Demo page**](http://afa7789.com/blockies-vue-demo)
Use
-----
This only works with this package [github.com/alexvandesande/blockies](github.com/alexvandesande/blockies).
```js
var icon = blockies.create({ // All options are optional
seed: 'randstring', // seed used to generate icon data, default: random
color: '#dfe', // to manually specify the icon color, default: random
bgcolor: '#aaa', // choose a different background color, default: random
size: 15, // width/height of the icon in blocks, default: 8
scale: 3, // width/height of each block in pixels, default: 4
spotcolor: '#000' // each pixel has a 13% chance of being of a third color,
// default: random. Set to -1 to disable it. These "spots" create structures
// that look like eyes, mouths and noses.
});
document.body.appendChild(icon); // icon is a canvas element
```
## Usage
Adding the plugin
```
// vue3
import { createApp } from 'vue'
import App from './App.vue'
import Blockies from 'blockies-vue'
// In the future I'll change it, so it doesn't have to be used as plugin.
createApp(App).use(Blockies).mount('#app')
// nuxt3
// in the plugins folder at root create "blockies.client.js"
import Blockies from 'blockies-vue'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Blockies)
})
```
Using the component
```ts
// Without Props
// With Props
```
Notes
-----
The defaults of size 8 and scale 4 generate 32x32 pixel icons. Below are some standard sizes that work well. A size larger than 10 will start generating more noisy icons that don't ressemble much.
* 24x24 `{size: 8, scale: 3}`
* 50x50 `{size: 5, scale: 10}`
Build
-----
node build
All this does is minify `blockies.js` to `blockies.min.js`.
License
-------
[WTFPL](http://www.wtfpl.net/)
Special thanks to Alex Van de Sande for showing me blockies.
