@fpapado/react-feather

React component for Feather icons. Fork of react-feather for convenience.

Stats

StarsIssuesVersionUpdatedCreatedSize
@fpapado/react-feather
102.1.03 years ago3 years agoMinified + gzip package size for @fpapado/react-feather in KB

Readme

React Feather Icons

npm

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.