bandolier-template/client/components/IconImage.svelte

<script>
  import rando from 'randomcolor';

  export let color="var(--color-icon-image)";
  export let pattern_color = false;
  export let background = false;
  export let fill_color="none";
  export let linecap="round";
  export let linejoin="round";
  export let name="";
  export let pattern="dots-sm";
  export let height="100%";
  export let width="100%";
  export let thickness="2";
  export let testid=`iconimage-default-${name}`;
  export let hue='blue';
  export let background_hue='orange';
  export let grayscale = 0;
  export let aspect_ratio = "1/1";

  let random_background = rando({luminosity: 'light', hue: background_hue});
  let random_pattern = rando({luminosity: 'light', hue});

  $: random_background = rando({luminosity: 'light', hue: background_hue});
  $: random_pattern = rando({luminosity: 'light', hue});
</script>

<style>
  .iconimage-container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
  }

  .feather {
    width: 70%;
    height: 70%;
  }
</style>

<div style="aspect-ratio: { aspect_ratio }; color: {pattern_color || random_pattern}; background-color: {background || random_background}; width: { width }; height: { height }; filter: grayscale({ grayscale });" data-testid={testid} class="pattern-{pattern} iconimage-container">
    {#if name}
      <svg class="icon-{name} feather"
           fill="{fill_color}"
           stroke="{color}"
           stroke-width="{thickness}"
           stroke-linecap="{linecap}"
           stroke-linejoin="{linejoin}"
           >
           <use href="/icon-sprites.svg#{name}"/>
      </svg>
    {:else}
      <slot></slot>
    {/if}
</div>