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.