Adds logo support with masking.

src/lib/components/Brand.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { BrandConfig } from '$lib/config';
+
+	export let brand: BrandConfig = {};
+	export let size = 48;
+	console.log(brand);
+
+	function masked() {
+		return brand.logo != undefined && brand.asmask == true;
+	}
+</script>
+
+<div
+	class="logo container"
+	style="--size: {size}px; --mask: url({brand.logo || ''})"
+	class:masked={masked()}
+>
+	{#if brand.logo}
+		{#if brand.asmask != true}
+			<img src={brand.logo} alt="logo" />
+		{/if}
+	{:else if brand.icon}
+		<p>an icon</p>
+	{/if}
+</div>
+
+<style>
+	.container {
+		width: var(--size);
+		height: var(--size);
+	}
+
+	.masked {
+		background: black;
+		mask: var(--mask) center no-repeat;
+		mask-size: var(--size);
+		-webkit-mask: var(--mask) center no-repeat;
+		-webkit-mask-size: var(--size);
+	}
+</style>