30 lines
648 B
Svelte
30 lines
648 B
Svelte
<script lang="ts">
|
|
import { pixelRuns } from '#lib/pet/pixelArt';
|
|
|
|
let { rows, pixelSize = 2 }: { rows: string[]; pixelSize?: number } = $props();
|
|
|
|
const width = $derived(rows[0]?.length ?? 0);
|
|
const height = $derived(rows.length);
|
|
const runs = $derived(pixelRuns(rows));
|
|
</script>
|
|
|
|
<svg
|
|
class="pixel-icon"
|
|
viewBox="0 0 {width} {height}"
|
|
width={width * pixelSize}
|
|
height={height * pixelSize}
|
|
shape-rendering="crispEdges"
|
|
aria-hidden="true"
|
|
>
|
|
{#each runs as run (`${run.x}-${run.y}`)}
|
|
<rect x={run.x} y={run.y} width={run.width} height="1" />
|
|
{/each}
|
|
</svg>
|
|
|
|
<style>
|
|
.pixel-icon {
|
|
display: block;
|
|
fill: currentColor;
|
|
}
|
|
</style>
|