obibring/feather-icons-react

Feather Icons as a React Component

Feather Icons React

npm install --save feather-icons-react

This package lets you use Feather Icons as a React Component. Feather Icons is an svg font library by Cole Bemis.

Example usage:

import FeatherIcon from 'feather-icons-react';
<FeatherIcon icon="close" />

Setting a size:

Size can be passed as either string or number.

e.g.: <FeatherIcon icon="copy" size="24" /> or <... size={24} />

Sizes can always be easily overridden by CSS.

Dynamically change icons

Toggle icon example:

class ToggleIconContainer extends Component {
  constructor() {
    super();

    this.state = {
      icon: 'x'
    };
  }

  toggleIcon = (icon) => {
    this.setState({
      icon
    });
  }

  render() {
    const { icon } = this.state;

    return (
      <div>
        <FeatherIcon icon={icon} />
        <ul>
          <li>
            <button onClick={() => this.toggleIcon('x')}>
              Make the Icon an X
            </button>
          </li>
          <li>
            <button onClick={() => this.toggleIcon('anchor')}>
              Make the Icon an Anchor
            </button>
          </li>
          <li>
            <button onClick={() => this.toggleIcon('box')}>
              Make the Icon a box
            </button>
          </li>
        </ul>
      </div>
    );
  }
}

The icons are all square, based on a 24x24 grid.

The full list of icon names can be referenced at: feathericons.com