A set of minimalistic customizable material design SVG-icon components for React.

• Node 7.5.0 or newer (not tested on earlier versions)
• Typescript 2.1.5 or newer (not tested on earlier versions)
• Babel 6.2.2 or newer (not tested on earlier versions)

I recommend that you get to know React and Material-UI.

npm i material-ui-customizable-icons --save

Once installed, just import and use the component:

import React from 'react';
import Active from 'material-ui-customizable-icons/Active';

const className = 'custom-icon';
const viewBox = '0 0 48 48';
const transform = 'scale(2)';
const style = {
  width: '48px',
  height: '48px',
};
const pallet = {
  circle: 'rgba(169, 169, 169, 1)',
  tick: 'rgba(255, 255, 255, 1)',
};

const Example = () => (
  <Active
    className={className}
    style={style}
    transform={transform}
    pallet={pallet}
  />
);

export default Example;

Component	Preview	Pallet properties to specify colors for
Active		circle, tick
Inactive		circle, tick, crossing
ChevronUp		primary
ChevronDown		primary
ChevronLeft		primary
ChevronRight		primary
ArrowUp		primary
ArrowDown		primary
ArrowLeft		primary
ArrowRight		primary
CaretUp		primary
CaretDown		primary
CaretLeft		primary
CaretRight		primary
ViewArticles		primary
ViewGrid		primary
ViewHeadlines		primary
ViewList		primary
Hamburger		primary
Edit		primary
Cancel		primary
Undo		primary
Erase		primary
Save		primary
Delete		cap, bucket, cross
MoveUp		arrow, strip
MoveDown		arrow, strip
MoveLeft		arrow, strip
MoveRight		arrow, strip
Search		stick, ring
SearchPlus		stick, ring, plus
SearchMinus		stick, ring, minus
Github		cat, ring

1. Submit an issue
2. Fork the repository
3. Create a dedicated branch (never ever work in master)
4. The first time, run command: yarn into the directory
5. Fix bugs or implement features

• Fix distribution type definitions to handle "import {...} from 'material-ui-customizable-icons'" imports
• Add tests
• Add examples directory

This project is licensed under the terms of the MIT license