1.0.1 • Published 2 years ago

svelte-hamburger v1.0.1

Weekly downloads
5
License
MIT
Repository
github
Last release
2 years ago

NPM License

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

PropertyTypeDefaultDescription
openbooleanfalseWhether hamburger is open
duoLinebooleanfalseWhether 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.

PropertyDefaultDescription
--line-width2pxWidth of the icon lines
<Hamburger --line-width="3px" />
1.0.1

2 years ago

1.0.0

2 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.1

3 years ago

0.0.0

3 years ago