https://github.com/madeleineostoja/svelte-hamburger

Animated hamburger icon for svelte
https://github.com/madeleineostoja/svelte-hamburger

animated-icons hamburger-icon hamburger-menu svelte

Last synced: 28 days ago
JSON representation

Animated hamburger icon for svelte

• Host: GitHub
• URL: https://github.com/madeleineostoja/svelte-hamburger
• Owner: madeleineostoja
• License: mit
• Created: 2020-11-21T07:24:17.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-02-10T07:05:06.000Z (over 2 years ago)
• Last Synced: 2024-04-26T10:03:45.706Z (7 months ago)
• Topics: animated-icons, hamburger-icon, hamburger-menu, svelte
• Language: Svelte
• Homepage:
• Size: 443 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


Svelte Hamburger


[![NPM](https://img.shields.io/npm/v/svelte-hamburger)](https://www.npmjs.com/package/svelte-hamburger) [![License](https://img.shields.io/npm/l/svelte-hamburger)](https://github.com/madeleineostoja/svelte-hamburger/blob/master/LICENSE.md)

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

### Usage

```sh

npm i svelte-hamburger

```

```svelte

  import Hamburger from 'svelte-hamburger';

  let open = false;

 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 |

```svelte

```

### 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.

```svelte

  header :global(.hamburger) {

    /* Custom styles */

  }

  

```

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 |

```svelte

```