Svelte Hamburger
Animated hamburger icon for svelte
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" />
