A customizable React Menu-icon. You can choose the size, animation and color of the icon.
## Install
``` npm install react-animated-menuicon ```
## Imports
``` import { MenuIcon, useMenuIcon } from 'react-animated-menuicon' ```
- useMenuIcon is a hook that must be bound to MenuIcon
- MenuIcon is the component to be used in JSX. It expects all the methods given my useMenuIcon
## Full example
```
import { MenuIcon, useMenuIcon } from 'react-animted-menuicon';
function Navbar() {
const methods = useMenuIcon({
size: 'md',
color: '#008080',
type: 'spin'
});
return (
);
}
```
## How to use
Hook -
```
const methods = useMenuIcon({}); // you must pass in an empty {} for all base properties
```
Component -
```
```
## Properties
Available Sizes
sm
1rem
md
2rem
lg
2.5rem
xl
3rem
custom
1em
```
const methods = useMenuIcon({
size: 'sm'
})
```
Sizes expects a string value to be passed in. If the sm-xl sizes are a bit different than whats needed, use the custom property and wrap the MenuIcon component in a HTML tag with the correct text size property.
### Custom example:
```
const methods = useMenuIcon({ size: 'custom' });
// will have a width/height of 23px
```
Available Types
base
spin
```
const methods = useMenuIcon({
type: 'spin'
})
```
Currently, only two animations are available: base and spin. If no value is passed, the component will default to base.
Available Colors
any
```
const methods = useMenuIcon({
color: 'red'
})
```
Colors expects any valid color, in any form. If you're using hexcode, please make sure to include the #. If no valid color is passed in, it will default to black (#000000).