Package Exports

svelte-hamburger
svelte-hamburger/dist/index.js
svelte-hamburger/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-hamburger) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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