This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-template/client/components/IconImage.svelte

59 lines
1.6 KiB

<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>