README
Feather Icons as React components
Feather icons as opinionated React components.
Installation
Use your package manager of choice:
# npm
npm i @fransvilhelm/feather
# yarn
yarn add @fransvilhelm/feather
The package will now be available to import and use in any of you react components.
Usage
All icons are created individually, unrelated to each other. And all icons found
on Feather are exported as named exports. They
names are transformed to pascal case: align-center -> AlignCenter.
import { Trash } from '@fransvilhelm/feather';
export const RemoveButton = () => {
return (
<button>
<Trash baseline /> Remove item
</button>
);
};
Since all icons are named exports and unrelated to eachother the library is easily tree-shaken. This means that if your bundler supports tree-shaking only the icons you actually use will be included in your final bundle.
Setting the color
The icons uses currentColor as the color of the strokes. That means the color
will be inherited from the wrapping element:
<div style={{ color: 'rebeccapurple' }}>
<ChevronRight />
</div>
Text alignment
The icons only accept one prop; baseline. When set it will align the icon to
the baseline of your text. This makes it very easy to add the icons as inline in
text, easily replacing old font icons. If you are aligning with flex and
align-items: center you should not set baseline on the icons.