# Feather Icons React [![npm](https://img.shields.io/npm/v/feather-icons-react.svg)](https://www.npmjs.com/package/feather-icons-react) `yarn add feather-icons-react` This package lets you use [Feather Icons](https://feathericons.com/) as a React Component. It currently supports up to version [4.29.0](https://github.com/feathericons/feather/releases/tag/v4.29.0) - [Usage](#usage) - [Contributing](#contributing) ## Usage You can use the default export and pass the 'icon' prop: ```jsx import FeatherIcon from 'feather-icons-react'; ; ``` Or you can use the provided named export in place of the icon prop: ```jsx import { Close } from 'feather-icons-react'; ; ``` This gives you the flexibility to dynamically change the icon if you want to use the default export (like in the Toggle Icon example below), or potentially save on size in your application bundle by not having to require all of the icons by using the default export. **Setting a size:** Size can be passed as either string or number. e.g.: `` or `` Sizes can always be easily overridden by CSS. **Setting fill and other properties** Fill defaults to none, but can be passed as a React prop `` Addtionally, you can add any other SVG tag properties, and they will pass through. **Setting colors** Use CSS. The icons default to use currentColor. This is equivalent to whatever text color is being used in the icon's container. #### Dynamically change icons **Toggle icon example:** ```jsx const ToggleIconContainer = () => { const [icon, setIcon] = useState('x'); return (

); }; ``` 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/) ## Contributing To build the bundled assets for consumption `yarn build` ### 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. Go into your desired project directory (ideally one directory above where you have feather-icons-react saved) 1. `git clone https://github.com/feathericons/feather.git` 2. `cd feather && npx install` 3. `npx babel-node bin/build-icons-json.js` 4. `cp dist/icons.json ../feather-icons-react/src/icons.json` 5. Now open the file you just copied. 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. ### Testing your changes You can use Storybook to verify your newly added icon is working as expected. `yarn storybook` This will open a new browser tab with the Storybook stories. You can type in the name of the icon and see it rendered in the main view. ### TODO - Add tests both to the icon render and the generate icon exports script - Convert to Typescript - Automatically generate new icons via script. - could copy build-icons-json script from feather-icons

Package	Téléchargements	Stars	Taille	Issues	Publication	Licence

feather-icons-react	20,315	48	460 kB	5	il y a 22 jours	ISC