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" />