vue-identicon

vue-polkadot UI Libraries › Globals

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>

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>

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>

FAQ

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