How to use the lit-element.svg function in lit-element

ClearSvg,
  AttachFileSvg,
} from '@axa-ch/materials/icons';

// icon isolated from others, because it's a component specific icon
import { FileUploadGroupSvg } from './icons';

import defineOnce from '../../../utils/define-once';
import { applyDefaults } from '../../../utils/with-react';
import styles from './index.scss';
import compressImage from './utils/imageCompressor';

const ADD_ICON = svg([AddSvg]);
const ATTACH_FILE_ICON = svg([AttachFileSvg]);
const DELETE_FOREVER_ICON = svg([DeleteForeverSvg]);
const CLEAR_ICON = svg([ClearSvg]);
const FILE_UPLOAD_GROUP_ICON = svg([FileUploadGroupSvg]);

const ACCEPTED_FILE_TYPES = 'image/jpg, image/jpeg, application/pdf, image/png';
const NOT_IMAGE_FILE_TYPES = ACCEPTED_FILE_TYPES.split(', ').filter(
  type => type.indexOf('image') === -1
);

export const getBytesFromKilobyte = kilobyte => 1024 * kilobyte;

class AXAFileUpload extends LitElement {
  static get tagName() {
    return 'axa-file-upload';
  }

  static get styles() {
    return css`

AttachFileSvg,
} from '@axa-ch/materials/icons';

// icon isolated from others, because it's a component specific icon
import { FileUploadGroupSvg } from './icons';

import defineOnce from '../../../utils/define-once';
import { applyDefaults } from '../../../utils/with-react';
import styles from './index.scss';
import compressImage from './utils/imageCompressor';

const ADD_ICON = svg([AddSvg]);
const ATTACH_FILE_ICON = svg([AttachFileSvg]);
const DELETE_FOREVER_ICON = svg([DeleteForeverSvg]);
const CLEAR_ICON = svg([ClearSvg]);
const FILE_UPLOAD_GROUP_ICON = svg([FileUploadGroupSvg]);

const ACCEPTED_FILE_TYPES = 'image/jpg, image/jpeg, application/pdf, image/png';
const NOT_IMAGE_FILE_TYPES = ACCEPTED_FILE_TYPES.split(', ').filter(
  type => type.indexOf('image') === -1
);

export const getBytesFromKilobyte = kilobyte => 1024 * kilobyte;

class AXAFileUpload extends LitElement {
  static get tagName() {
    return 'axa-file-upload';
  }

  static get styles() {
    return css`
      ${unsafeCSS(styles)}

/* eslint-disable import/no-extraneous-dependencies */
import { html, svg } from 'lit-element';
import { classMap } from 'lit-html/directives/class-map';
import { ExpandSvg } from '@axa-ch/materials/icons';
import debounce from '../../../utils/debounce';
import styles from './index.scss';
import NoShadowDOM from '../../../utils/no-shadow';
import defineOnce from '../../../utils/define-once';
import fireCustomEvent from '../../../utils/custom-event';
import createRefId from '../../../utils/create-ref-id';
import typecheck from '../../../utils/typecheck';

// module constants
const ARROW_ICON = svg([ExpandSvg]);
const DEBOUNCE_DELAY = 250; // milliseconds
const DROPDOWN_UL_MAXHEIGHT = '200px';
const EMPTY_FUNCTION = () => {};
const WORD_END = '\x00';
const INDEX_END = '\x01';
const AUTOSUGGEST_INACTIVITY_DELAY = 300; // milliseconds

// module globals
let openDropdownInstance;

// helper functions
const shouldMove = elem => {
  const boundingBox = elem.getBoundingClientRect();
  const bottomIsInViewport =
    boundingBox.bottom <=
    (window.innerHeight || document.documentElement.clientHeight);

getWeekdays,
  getAllLocaleMonthsArray,
  parseLocalisedDateIfValid,
} from './utils/date';

import NoShadowDOM from '../../../utils/no-shadow';
import defineOnce from '../../../utils/define-once';
import { applyDefaults } from '../../../utils/with-react';
import debounce from '../../../utils/debounce';
import createRefId from '../../../utils/create-ref-id';
import fireCustomEvent from '../../../utils/custom-event';

import Store from './utils/Store';

// module constants
const dateInputIcon = svg([DateInputSvg]);
const EMPTY_FUNCTION = () => {};

// module globals
let openDatepickerInstance;

// helper functions
const range = (start, end) =>
  new Array(end - start + 1).fill(undefined).map((_, i) => i + start);

const shouldMove = elem => {
  const element = elem.getBoundingClientRect();
  const moreSpaceOnTopThanBottom =
    element.top > window.innerHeight - element.bottom;
  return moreSpaceOnTopThanBottom;
};

const shortAccordionContent = {
      'o-footer__main-content-panel': true,
      'o-footer__main-content-panel--short': true,
      'o-footer__main-content-panel--open': this._accordionActiveIndex === 1,
      'js-footer__main-content-panel': true,
    };

    const accordionCaretState = index => {
      return {
        'o-footer__accordion-button-caret': true,
        'o-footer__accordion-button-caret--open':
          this._accordionActiveIndex === index,
      };
    };

    const showCaret = svg([CaretSvg || '']);

    const links = this.querySelectorAll('a');
    // Add event listsner on the <a> tag, which is inside a slot element.
    // That's why we cannot use @click, as it comes from light dom
    [].forEach.call(links, link =&gt; {
      link.addEventListener('click', this._handleLinkClick);
    });

    if (this.slotsNotPrepared) {
      this._prepareSlotsWithIndexes();
      this.slotsNotPrepared = false;
    }

    return html`
      <footer class="o-footer">
        </footer></a>

render() {
    return this._loadedSvg && svg([this._loadedSvg]);
  }
}

render() {
    const { open } = this;

    return html`
      <button class="a-popup-button">
        ${open ? svg([CancelSvg]) : svg([InfoSvg])}
      </button>
    `;
  }
}

render() {
    const { _loadedSvg, title, description } = this;

    return html`
      <section class="m-policy-features-item">
        <div class="m-policy-features-item__icon">
          ${_loadedSvg &amp;&amp; svg([_loadedSvg])}
        </div>
        <h1 class="m-policy-features-item__title">${title}</h1>
        <p class="m-policy-features-item__description">${description}</p>
      </section>
    `;
  }
}

class="a-radio__input"
          type="radio"
          name="${name}"
          ?checked="${checked}"
          value="${value}"
          ?disabled="${disabled}"
          @change="${this.handleChange}"
          @focus="${this.handleFocus}"
          @blur="${this.handleBlur}"
        />
        ${button
          ? html``
          : html`
              <span class="a-radio__icon"></span>
            `}
        ${icon ? svg([icon]) : html``}
        <div class="a-radio__content">${label}</div>
      
    `;
  }

render() {
    const { open } = this;

    return html`
      <button class="a-popup-button">
        ${open ? svg([CancelSvg]) : svg([InfoFlatSvg])}
      </button>
    `;
  }
}