Rebel-icons NPM

rebel-icons

Include pixel perfect icons in your React projects easily with rebel-icons. Use ES6 imports and include only the icons that your project is using.

RebelIcons

Use React Higher Order component to adjust your icons defaults. Override an attribute if needed and even more... with Rebel Icons.

Dependencies

This library designed to be used with React, you don't need any other packages to use this icons.

Installation

We distribute this package as npm package. In order to use it you just need to install it as any other project in your system.

npm install rebel-icons --save

Usage

You can easily add rebel-icons to any Component in you app, just import it, and you good to go.

import Icon from 'rebel-icons';

class OneAwesomeComponent extends Component {
  render() {
    return <h3> Lets do some <Icon icon="RubyIcon" /></h3>
  }
}

Configuration

All components use IconBase, so you can use Context to provide some defaults to your project. Your can use one of your root component to set this configuration.

export default class RootComponent extends Component {
  static childContextTypes = {
    rebelIconsBase: PropTypes.object
  };

  getChildContext() {
    return {
      rebelIconsBase: {
        color: 'grey',
        size: 64,
        style: {
          ...
        }
      }
    }
  }
  ...
}

If you want to reduce the size of your bundle and you are using webpack you can use ContextReplacementPlugin to specify the list of Rebel Icons that you want to use.

// Webpack_config.js
 
const Icons = ['rebel', 'js', 'ruby', ...];
const regExp = new RegExp(`(?:${Icons.join('|')})Icon`, 'i');

plugins: [
  ...
  new webpack.ContextReplacementPlugin(/rebel-icons[\/\\]rebel-lib$/, regExp)
]

Getting help

If you have questions, concerns, bug reports, etc, please file an issue in this repository's Issue Tracker. We appreciate all feedback and will be glad to help if we can.