95 lines
2.1 KiB
Markdown
95 lines
2.1 KiB
Markdown
# Feather Icons React
|
|
|
|
[](https://www.npmjs.com/package/feather-icons-react)
|
|
|
|
`npm install --save 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:
|
|
```javascript
|
|
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.
|
|
|
|
**Setting fill and other properties**
|
|
|
|
Fill defaults to none, but can be passed as a React prop
|
|
|
|
`<FeatherIcon icon="heart" fill="red" />`
|
|
|
|
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:**
|
|
```javascript
|
|
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](https://feathericons.com/)
|
|
|
|
|
|
## Developing Locally
|
|
To build the bundled assets for consumption
|
|
`yarn build`
|
|
|
|
Update this package to have a demo and some tests on icon rendering.
|