Source: element/IconElement.js

  1. import {
  2.   LitElement, svg, css, nothing,
  3. } from 'lit';
  4. import icons from 'bootstrap-icons/bootstrap-icons.svg';
  6. /**
  7.  * @class IconElement
  8.  *
  9.  * This class provides an icon element
  10.  *
  11.  * @example
  12.  * <js-icon size="large">1-circle</js-icon>
  13.  */
  14. export class IconElement extends LitElement {
  15.   static get localName() {
  16.     return 'js-icon';
  17.   }
  19.   constructor() {
  20.     super();
  21.     this.size = 'default';
  22.   }
  24.   static get properties() {
  25.     return {
  26.       size: { type: String, reflect: true },
  27.     };
  28.   }
  30.   static get styles() {
  31.     return css`
  32.       :host {
  33.           display: inline-block;
  34.           vertical-align: middle;
  35.       }
  36.       .size-small {
  37.           width: var(--icon-size-small);
  38.           height: var(--icon-size-small);
  39.       }
  40.       .size-medium, .size-default {
  41.           width: var(--icon-size-medium);
  42.           height: var(--icon-size-medium);
  43.       }
  44.       .size-large {
  45.           width: var(--icon-size-large);
  46.           height: var(--icon-size-large);
  47.       }
  48.       .size-xlarge {
  49.           width: var(--icon-size-xlarge);
  50.           height: var(--icon-size-xlarge);
  51.       }
  52.       svg {
  53.         width: 100%;
  54.         height: 100%;
  55.         fill: currentColor;
  56.       }
  57.     `;
  58.   }
  60.   get classes() {
  61.     const classes = [];
  62.     classes.push(`size-${this.size}`);
  63.     return classes;
  64.   }
  66.   get name() {
  67.     return this.textContent.trim() || 'bootstrap-reboot';
  68.   }
  70.   render() {
  71.     return svg`<div class=${this.classes.join(' ') || nothing}><svg class=${this.classes.join(' ') || nothing}><use href="${icons}#${this.name}"/></svg></div>`;
  72.   }
  73. }