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: 3 months 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 (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-10T07:05:06.000Z (over 3 years ago)
- Last Synced: 2024-10-30T02:58:50.765Z (7 months ago)
- Topics: animated-icons, hamburger-icon, hamburger-menu, svelte
- Language: Svelte
- Homepage:
- Size: 443 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Svelte Hamburger
[](https://www.npmjs.com/package/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
```