<script lang="ts">
  /** Class name for additional CSS styling */
  export let clazz = '';
  export { clazz as class };

  /** Icon color. */
  export let color = 'currentColor';

  /** Material Design Icons icon name */
  export let mdi: string;

  /** Icon size. Numbers are treated as `<value>em`, strings as `<value>`. */
  export let size: number | string = 1;

  let mdiOld = '';
  let path = '';

  $: loadIcon(mdi);

  $: width = size ? (typeof size === 'number' || !Number.isNaN(Number(size)) ? `${size}em` : size) : '1em';

  /** Load the icon from the `$lib/icons` folder. */
  async function loadIcon(mdi: string) {
    if (mdi === mdiOld) return;
    path = (await import(`$lib/icons/${mdi}.ts`)).default;
  }
</script>

<svg class={clazz} viewBox="0 0 24 24" style="width: {width}; height: {width}">
  <path fill={color} d={path} />
</svg>
