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="200";
  export let width="200";
  export let thickness="2";
  export let testid=`iconimage-default-${name}`;
  export let hue='orange';
  export let background_hue='blue';
  export let grayscale = 0;
  export let aspect_ratio = "16/9";

  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 {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: 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 });">
  <div 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>
</div>