update readme

README.md

@@ -2,12 +2,15 @@
 
 [![npm](https://img.shields.io/npm/v/feather-icons-react.svg)](https://www.npmjs.com/package/feather-icons-react)
 
-`npm install --save feather-icons-react`
+`yarn add feather-icons-react`
 
 This package lets you use [Feather Icons](https://feathericons.com/) as a React Component.
 Feather Icons is an svg font library by Cole Bemis.
 
-### Example usage:
+* [Usage](#usage)
+* [Contributing](#contributing)
+
+## Usage
 ```javascript
 import FeatherIcon from 'feather-icons-react';
 <FeatherIcon icon="close" />
@@ -36,48 +39,32 @@ Use CSS. The icons default to use currentColor. This is equivalent to whatever t
 #### Dynamically change icons
 **Toggle icon example:**
 ```javascript
-class ToggleIconContainer extends Component {
-  constructor() {
-    super();
+const ToggleIconContainer = () => {
+  const [icon, setIcon] = useState('x');
 
-    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>
-    );
-  }
-}
+  return (
+    <div>
+      <FeatherIcon icon={icon} />
+      <ul>
+        <li>
+          <button onClick={() => setIcon('x')}>
+            Make the Icon an X
+          </button>
+        </li>
+        <li>
+          <button onClick={() => setIcon('anchor')}>
+            Make the Icon an Anchor
+          </button>
+        </li>
+        <li>
+          <button onClick={() => setIcon('box')}>
+            Make the Icon a box
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+};
 ```
 
 
@@ -87,8 +74,21 @@ The icons are all square, based on a 24x24 grid.
 The full list of icon names can be referenced at: [feathericons.com](https://feathericons.com/)
 
 
-## Developing Locally
+## Contributing
 To build the bundled assets for consumption
 `yarn build`
 
-Update this package to have a demo and some tests on icon rendering.
+### Updating the icons
+If you found a missing icon, it is pretty easy to generate a new icons.json and get a PR up so this package stays in sync with the latest feather icons.
+1. git clone https://github.com/feathericons/feather.git
+2. npx install
+3. npx babel-node bin/build-icons-json.js
+4. cp dist/icons.json ../feather-icons-react/src/icons.json
+5. Format the file, try to avoid entire green so the diff looks neat in the PR
+
+Alternatively, you can simply copy just the lines from the JSON file you know are missing. This is easier if you're just adding one new icon.
+
+### TODO
+- Update this package to have a demo and some tests on icon rendering.
+- Automatically generate new icons via script.
+  - could copy build-icons-json script from feather-icons