Nanometers Per Millisecond
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-icons

3.2.1 • Public • Published
React Icons

React Icons

npm

Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Installation

npm install react-icons --save

Usage

import { FaBeer } from 'react-icons/fa';
 
class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under react-icons you import from.

For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-icons/md';

Icons

You can add more icons by submitting pull requests or creating issues.

Configuration

You can configure react-icons props using React context API.

requirement React 16.3 or higher.

import { IconContext } from "react-icons";
 
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>
key default memo
color undefined(inherit)
size 1em
className undefined
style undefined can overwrite size and color
attr undefined overwritten by other attributes

Migrate from version 2 -> 3

Change import style

Import path has changed. You need to rewrite from the old style.

// OLD IMPORT STYLE
import FaBeer from 'react-icons/lib/fa/beer';
 
class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}
// NEW IMPORT STYLE
import { FaBeer } from 'react-icons/fa';
 
class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

Ending up with a large JS bundle? Check out this issue.

Adjustment CSS

From version 3, vertical-align: middle is not automatically given. Please use IconContext to specify className or style.

example for global styling

<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>

example for give global className

// app.tsx
<IconContext.Provider value={{ className: 'react-icons' }}>
 
// app.css
.react-icons {
  vertical-alignmiddle;
}

TypeScript native support

Dependencies on @types/react-icons can be deleted.

npm remove @types/react-icons

Contribute

development

yarn
yarn submodule  # fetch icon sources 
cd packages/react-icons
yarn build

scripts for run demo

cd packages/react-icons
yarn build
cd ../demo
yarn start

run preview site

cd packages/react-icons
yarn build
cd ../preview
yarn start

Tips

SVG

Svg is supported by all major browsers.

Why ES6 import and not fonts

With react-icons, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.

Related

Licence

MIT

  • Icons are taken from the other projects so please check each project licences accordingly.

Keywords

none

install

npm i react-icons

Downloadsweekly downloads

344,824

version

3.2.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
Report a vulnerability