friktor / react-material-icons

Simple component for anomated Material Icons in React.

React Material Icons

---

Simple component for animated Material Icons in React. Fine works with react 15.0 or later.

Usage & Docs

NOTE

By default plugin work only commonjs (es6) style, without umd or other multi-module system. If you want use this lib with other module system - code of lib very simple, and you can easily rewrite lib for other module system.

Install

You can install this lib from npm, or from github (with npm :D)

npm install

npm install react-morph-material-icons # from npmjs.com
npm install git+https://github.com/friktor/react-material-icons # from github

What about icons?

Icons by default compile separately from library component. File with icon shapes very big. But you can import module with shapes from:

react-morph-material-icons/build/shapes

Icons sorting by category, you can use full category, or get required icons and create object set, example:

import icons from "react-morph-material-icons/build/shapes";

var myCollectionOfCategory = icons.action;
/* or */
var myCollection = {
  'my-name-id-for-icon': icons.action['3d_rotation']
};

I recommended usage personal icons object for different icon component. Why? By default svg-morpheus save all sent shapes - when you declare the components and gave him collection available for the transformation of icons.

Import module

ES6

import MorphIcon from "react-morph-material-icons";

CommonJS

var MorphIcon = require("react-morph-material-icons").default;

react-material-icons's Issues

Morph function does not morph icon....

I'm trying to do something similar as in the example in my own app, but for some reason I can't get icon morphing to work. I'm running React v15 and the latest react-material-icons. My object looks like this:

<MorphIcon shapes={{left: icons.hardware.keyboard_arrow_left, right: icons.hardware.keyboard_arrow_right}} options={{duration: 500}} ref={key} />

and when a button is pressed, I call:

this.refs[key].morph('left')

I've tried hard-coding the ref key to a simple name, but that doesn't work. I see that the icons morph initially into their first state, but once set, I cant' change them. Would this be a React caching issue?

Thanks,
-Mike

npm package broken

Hi,

Nice wrapper!

I get errors when I require this module.

It seems like index.compiled.js tries to require svg-morpheus from '../lib' instead of './lib'
https://github.com/friktor/react-material-icons/blob/master/index.compiled.js#L2

I can make a pull request to fix this, but I guess index.compiled.js is the end result of some build process?