plouc/react-svg-buttons

React configurable animated svg buttons

React SVG buttons

This package provides a <MorphIcon /> component used to compose available buttons, it's able to morph from whatever icon type to another one.

The <MorphIcon /> component exposes 18 icon types.

It also provides a set of button components.

Please, take a look at the demo.

Installation

npm install --save react-svg-buttons

Usage

import { render } from 'react-dom'
import {
    MorphIcon,
    CloseButton,
    NavButton,
    PlusButton,
} from 'react-svg-buttons'

const Demo = () => (
    <div>
        <MorphIcon type="thunderbolt" />
        <CloseButton />
        <NavButton direction="right" opened={false} />
        <PlusButton />
    </div>
)

render(<Demo />, document.getElementById('demo'))

License

MIT. Copyright (c) 2015 Raphaël Benitte.

react-svg-buttons's Issues

onClick instead of onMouseEnter

Just an idea. It would be great if we could request the animation to take place on click instead of on hover - possibly passing an active state. This would particularly handy for the menu button.

Creating new icons?

Awesome library!

Want to build a "play" icon - bit overwhelmed with all the options in MorphIcon - what's the rough structure that I should be aware of?

Also happy to open a pull request for any icons that I do create to expand the available options!