react-styled-system-icons

React Icons

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

Installation

npm install react-styled-system-icons --save

Usage

import { FaBeer } from 'react-styled-system-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-styled-system-icons you import from.

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

Icons

• Font Awesome License: CC BY 4.0 License
• Ionicons License: MIT
• Material Design icons License: Apache License Version 2.0
• Typicons License: CC BY-SA 3.0
• Github Octicons icons License: MIT
• Feather License: MIT
• Game Icons License: CC BY 3.0
• Weather Icons License: SIL OFL 1.1

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

Configuration

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

requirement React 16.3 or higher.

import { IconContext } from "react-styled-system-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-styled-system-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-styled-system-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-styled-system-icons' }}>
 
// app.css
.react-styled-system-icons {
  vertical-align: middle;
}

TypeScript native support

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

npm remove @types/react-styled-system-icons

Contribute

development

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

scripts for run demo

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

run preview site

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

Tips

SVG

Svg is supported by all major browsers.

Why ES6 import and not fonts

With react-styled-system-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

• react-svg-morph

Licence

MIT

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