import iconSvg from '../icons.svg';

const styles = `
  .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-rendering:geometricPrecision;
  }
`;

export class Icon extends HTMLElement {
  constructor () {
    super();

    const shadow = this.attachShadow({ mode: 'open' });
    const icon = this.getAttribute('icon') || 'woorank';

    shadow.innerHTML = `
      ${iconSvg}
      <style>${styles}</style>
      <svg focusable="false" class="icon">
        <use xlink:href="#${icon}"></use>
      </svg>
    `;
  }
}

export default Icon;