<fa-svg icon-class.bind="iconClass"></fa-svg>

import {inject, inlineView, bindable} from 'aurelia-framework';

@inject(Element)
@inlineView("<template></template>")
export class FaSvg {
  @bindable iconClass;

  constructor(element) {
    this.element = element;
  }

  iconClassChanged(newIcon) {
    if (!this.live) return;
    this._rebuild(newIcon);
  }

  attached() {
    this.live = true;
    this._rebuild(this.iconClass);
  }

  detached() {
    this.live = false;
  }

  _rebuild(iconClass) {
    this.element.innerHTML(iconClass ? `<i class="${iconClass}"></i>` : '');
  }
}