react-icons-ng v4.9.1

React Icons

Elevate your React projects to new heights with react-icons-ng, an enhanced icon library derived from react-icons/react-icons. With a substantial addition of over 60,000 icons, our forked version surpasses the original repository in terms of versatility and variety. Leveraging the convenience of ES6 imports, react-icons-ng empowers you to effortlessly integrate only the icons that align with your project's needs. Embrace a seamless development experience and unlock the full potential of React icons with our impressive solution.

Installation (for standard modern project)

yarn add react-icons-ng
# or
npm install react-icons-ng --save

example usage

import { FaBeer } from "react-icons-ng/fa";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

NOTE: each Icon package has it's own subfolder under react-icons-ng you import from.

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

Icons

//: # START_VERSION

Total Count of Icons: 66235

//: # END_VERSION

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

Configuration

You can configure react-icons-ng props using React Context API.

Requires React 16.3 or higher.

import { IconContext } from "react-icons-ng";

<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>;

Adjustment CSS

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

Global Inline Styling

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

Global className Styling

Component

<IconContext.Provider value={{ className: 'react-icons-ng' }}>

CSS

.react-icons {
  vertical-align: middle;
}

TypeScript native support

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

Yarn

yarn remove @types/react-icons-ng

NPM

npm remove @types/react-icons-ng

Contributing

./build-script.sh will build the whole project. See also CI scripts for more information.

Development

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

Preview

cd packages/react-icons-ng
yarn fetch
yarn build

cd ../preview
yarn start

Demo

The demo is a Create React App boilerplate with react-icons-ng added as a dependency for easy testing.

cd packages/react-icons-ng
yarn fetch
yarn build

cd ../demo
yarn start

Why React SVG components instead of fonts?

SVG is supported by all major browsers. With react-icons-ng, 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 Projects

• react-svg-morph
• react-icons

Licence

MIT

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