Add vue-identicon (#178)

* Add vue-identicon

* Remove generated file

* Add links to reactnative & vue identicons

* Update package.json

* Update Jdenticon.vue

* Update Polkadot.vue

* Move deps around

* Empty on error

* Build to build

* ... typo

* Fix vue-identicon doc generation

* Ok, I give up... vuepress and vue packages, no luck

* Swap to TypeScript components (aligning with polkadot-js)

* Expand template with build

* Adjust vue examples

* debump gh-pages dep

* Expand doc. desc.

* Fix vuepress docs generation

* Address CC complexity

* eslint fix (babel config)

* Add Bechball

packages/vue-identicon/src/icons/Polkadot.ts

@@ -0,0 +1,36 @@
+// Copyright 2017-2019 @polkadot/vue-identicon authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import Vue from 'vue';
+import generateIcon from '@polkadot/ui-shared/polkadotIcon';
+
+interface Data {
+  svgHtml: string;
+}
+
+/**
+ * @name Polkadot
+ * @description The Polkadot default identicon
+ */
+export const Polkadot = Vue.extend({
+  template: `<div v-html="svgHtml" />`,
+  props: ['address', 'size'],
+  data: function (): Data {
+    return {
+      svgHtml: `<svg viewBox="0 0 64 64" />`
+    };
+  },
+  created: function (): void {
+    this.createSvgHtml();
+  },
+  methods: {
+    createSvgHtml: function (): void {
+      const circles = generateIcon(this.address).map(({ cx, cy, fill, r }): string =>
+        `<circle cx=${cx} cy=${cy} fill="${fill}" r=${r} />`
+      ).join('');
+
+      this.svgHtml = `<svg height=${this.size} viewBox='0 0 64 64' width=${this.size}>${circles}</svg>`;
+    }
+  }
+});