2.1.0 • Published 6 years ago
@fpapado/react-feather v2.1.0
React Feather Icons
Fork of react-feather with microbundle
as the build step, and ES modules in the distribution.
Also has accessible defaults.
Simply beautiful SVG icons as React components. Designed by colebemis on a 24x24 grid with an emphasis on functionality, consistency and simplicity.
Installation
npm install @fpapado/react-feather
Usage
ES module imports should get tree-shaken correctly by bundlers. This means that you ship only the icons used.
import { Camera } from 'react-feather';
const MyComponent = () => (
<div>
<span>Photos</span>
<Camera purpose="decorative"/>
</div>
)
Icons can be configured with props:
<Camera color="red" size={48} purpose="decorative "/>
Purpose prop
The purpose
prop is technically required, and allows the buttons to expose accessible defaults.
There are two options:
- "decorative", which marks the Icon to be ignored by assistive technologies;
- "standalone", which markes the Icon as content, and exposes it to assistive technlogies.
Why would I use this?
- This package includes accessible defaults (
focusable="false"
,role="img"
, handling of purpose being "decorative" or "standalone") react-feather
requires path imports for bundle savings. That results in more verbose imports, and exposes distribution details. Imo, those should be opaque.- I have not had much luck using such imports with Typescript.
react-feather
includes propTypes, which I do not need.
Why would I not use this?
- You are fine with full-path imports and / or your setup supports them.
- NPM download count is important to you.