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.
55 lines
1.7 KiB
55 lines
1.7 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="100%";
|
|
export let width="100%";
|
|
export let icon_height="unset";
|
|
export let icon_width="unset";
|
|
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;
|
|
}
|
|
</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}"
|
|
style="width: {icon_width}; height: {icon_height}"
|
|
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>
|
|
|