identicon-avatar.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="blockies-import.html">

<dom-module id="identicon-avatar">
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
      }
    </style>
  </template>
</dom-module>

<script>
  /**
   * `identicon-avatar`
   *
   *
   * @customElement
   * @polymer
   * @demo demo/index.html
   */
  class IdenticonAvatar extends Polymer.Element {
    static get is() { return 'identicon-avatar'; }
    static get properties() {
      return {
        seed: {
          type: String,
          value: 'test'
        },
        color: {
          type: String,
          value: '#88df88'
        },
        bgColor: {
          type: String,
          value: '#eee'
        },
        size: {
          type: Number,
          value: 5
        },
        scale: {
          type: Number,
          value: 50
        }
      };
    }
    ready() {
      super.ready();
      const avatar = blockies.create({
        seed: this.seed,
        color: this.color,
        bgcolor: this.bgColor,
        size: this.size,
        scale: this.scale
      });
      this.shadowRoot.appendChild(avatar);
    }
  }

  window.customElements.define(IdenticonAvatar.is, IdenticonAvatar);
</script>