diff --git a/README.md b/README.md index f77dc9d..a81b500 100644 --- a/README.md +++ b/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'; @@ -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 ( -
- -
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
-
- ); - } -} + return ( +
+ +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+ ); +}; ``` @@ -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