Svelte Hamburger

Featherweight, performant, animated hamburger menu icon for Svelte with no external dependencies.

Usage

npm i svelte-hamburger

<script>
  import Hamburger from 'svelte-hamburger';

  let open = false;
</script>

<Hamburger {open} on:click={() => open = !open} />

Properties

Property	Type	Default	Description
open	boolean	false	Whether hamburger is open
duoLine	boolean	false	Whether to only use 2 lines for the icon

<Hamburger open={false} duaLine={true} />

Styling

Set the desired height, width, and color of the icon direclty on the component. It will consume class strings and you can target them with a :global modifier in your Svelte styles.

<style>
  header :global(.hamburger) {
    /* Custom styles */
  }
</style>

<header>
  <Hamburger class="hamburger" />
</header>

Additionally the following CSS properties are available for more fine grained control over the style of the icon.

Property	Default	Description
--line-width	2px	Width of the icon lines

<Hamburger --line-width="3px" />