@fpapado/react-feather
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

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.

Package Sidebar

Install

npm i @fpapado/react-feather

Weekly Downloads

11

Version

2.1.0

License

MIT

Unpacked Size

2.76 MB

Total Files

283

Last publish

Collaborators

  • fpapado