Burger.svelte

Finding icons is one of my least favourite tasks on a project, and the burger icon is almost always needed at some point. I realised they are actually quite simple, and I could probably knock one out in Gimp in half an hour. Then I realised they are really simple, and that I could probably knock one out in Svelte in five minutes.

Here it is:

<script>
export let rounded = false;
</script>

<style _lang="scss">
#main {
	--w: var(--width, 20);
	--t: var(--thickness, 2);
	--s: var(--spacing, 5);
	--p: var(--padding, 0);
	
	width: calc(var(--w) * 1px);
	height: calc(var(--t) * 3 + var(--s) * 2 * 1px);
	padding: var(--p);
	box-sizing: content-box;
	cursor: var(--cursor, pointer);
}

.line {
	height: calc(var(--t, 2) * 1px);
	background: var(--background, #00000080);
	
	&#main.rounded & {
		border-radius: calc(var(--t) / 2 * 1px);
	}
	
	&:not(:last-child) {
		margin-bottom: calc(var(--s) * 1px);
	}
}
</style>

<div id="main" class:rounded on:click>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
</div>

(Remove the _ from the lang attribute - it was messing with the Svelte preprocessing.)