Sha256: 6654ab9deccc4f3b047383779ef850e28fe7aed76ecf1635b447051d59dff2fa

Contents?: true

Size: 1017 Bytes

Versions: 16

Compression:

Stored size: 1017 Bytes

Contents

class Icon extends HTMLElement {
  static get observedAttributes() {
    return ["name", "size", "icon-style"]
  }

  constructor() {
    super()
    this.spriteUrl = document
      .querySelector('meta[name="alchemy-icon-sprite"]')
      .getAttribute("content")
  }

  connectedCallback() {
    this.render()
  }

  attributeChangedCallback() {
    this.render()
  }

  render() {
    const sizeClass = this.size ? ` icon--${this.size}` : ""
    this.innerHTML = `<svg class="icon${sizeClass}"><use href="${this.spriteUrl}#ri-${this.iconName}${this.style}" /></svg>`
  }

  set name(value) {
    this.setAttribute("name", value)
  }

  get iconName() {
    return this.getAttribute("name")
  }

  get size() {
    return this.getAttribute("size")
  }

  get style() {
    const value = this.getAttribute("icon-style")
    switch (value) {
      case "none":
        return ""
      case null:
        return "-line"
      default:
        return `-${value}`
    }
  }
}

customElements.define("alchemy-icon", Icon)

Version data entries

16 entries across 16 versions & 1 rubygems

Version Path
alchemy_cms-7.3.6 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.2.9 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.3.5 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.2.8 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.3.4 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.3.3 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.3.2 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.2.7 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.3.1 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.3.0 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.2.6 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.2.5 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.2.4 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.2.3 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.2.2 app/javascript/alchemy_admin/components/icon.js
alchemy_cms-7.2.1 app/javascript/alchemy_admin/components/icon.js