vue-polkadot UI LibrariesGlobals

vue-polkadot UI Libraries

@vue-polkadot/vue-identicon

A Vue component which generates a visual representation of a hashed value to be used as an avatar in apps. The most common use of vue-identicon would be to generate an avatar from a users address. This component has 4 themes and the size is adjustable.

Installation

Installation of the component can be done with npm or yarn.

NPM: npm install --save @vue-polkadot/vue-identicon

Yarn: yarn add @vue-polkadot/vue-identicon

Props

3 props are exposed to customize the look and feel of the Identicon component

Name Description Type Default
value Address used to generate an icon String null
theme Theme for icon String jdenticon
size Size of icon Number 128

Usage Examples

Simple usage example

<template>
  <Identicon
    :value="address"
    :theme="polkadot"
    :size="128"
  />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Identicon from '@vue-polkadot/vue-identicon';

@Component({
  components: {
    Identicon,
  },
})
export default class MyComponent extends Vue {
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

An Identicon with props using Jdenticon as the default theme

<template>
  <Identicon
    :value="address"
    :theme="theme"
    :size="size"
  />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Identicon from '@vue-polkadot/vue-identicon';

@Component({
  components: {
    Identicon,
  },
})
export default class Keypair extends Vue {
  @Prop(String) public address!: string;
  @Prop({ default: 'jdenticon'}) public theme!: string;
  @Prop({ default: 64 }) public size!: number;
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Using an Identicon in your app

This example uses the App.vue class generated by the vue-cli when you create a new project

<template>
  <div id="app">
    <IdenticonImage />
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
import IdenticonImage from './components/IdenticonImage.vue';
@Component({
  components: {
    HelloWorld,
    IdenticonImage
  },
})
export default class App extends Vue {}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

FAQ

  • Themes?
    • Yes, there are themes 'polkadot', 'substrate', 'beachball' or 'jdenticon'