Noncollinear Perpendicular Microcrystalline

react-icons

3.0.5 • 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>
    }
}

If you are not using an ES6 compiler like Babel or Rollup, you can include icons from the compiled folder ./lib. Babel by default will ignore node_modules so if you don't want to change the settings you will need to use files from ./lib.

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>
    }
}

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

349,102

version

3.0.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
Report a vulnerability