React Icons

Redefine the visual elegance of your React projects with react-icons-ng. Stemming from the prestigious legacy of react-icons/react-icons, our forked library enriches your design experience by offering an astounding collection of over 60,000 icons. This vast addition ensures we outshine the original repository in diversity and adaptability.

Harness the power of ES6 imports and embed into your projects only the icons that resonate with your vision. With react-icons-ng, not only do you get unparalleled icon variety but also a streamlined development workflow. Dive into the dynamic world of React icons and make your applications visually captivating.

Before proceeding, please note that the NPM registry for this package is hosted on GitHub. You need to configure your NPM client to use GitHub Packages registry for this package. For more information, see "Configuring npm for use with GitHub Packages".

yarn add @onemind-services-llc/react-icons-ng
# or
npm install @onemind-services-llc/react-icons-ng --save

import { FaBeer } from "@onemind-services-llc/react-icons-ng/fa";

function Question() {
  return (
    <h3>
      How about a <FaBeer />?
    </h3>
  );
}

⚠️ NOTE: Each icon package resides in its dedicated subfolder under @onemind-services-llc/react-icons-ng.

For instance, if you wish to employ an icon from Material Design, your import should be:

import { ICON_NAME } from '@onemind-services-llc/react-icons-ng/md';

Opt for this if your project scales up significantly. Bear in mind, though, this approach might prolong the installation time.

yarn add @onemind-services-llc/react-icons-ng-pack
# or
npm install @onemind-services-llc/react-icons-ng-pack --save

import { FaBeer } from "@onemind-services-llc/react-icons-ng-pack/fa/FaBeer";

function Question() {
  return (
    <h3>
      Fancy a <FaBeer />?
    </h3>
  );
}

[//]: # START_VERSION

Total Count of Icons: 67434

[//]: # END_VERSION

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

Easily customize react-icons-ng properties utilizing the React Context API.

Prerequisite: Ensure you have React 16.3 or a later version.

import { IconContext } from "@onemind-services-llc/react-icons-ng";

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

Icons no longer come with the vertical-align: middle styling by default. For alignment adjustments, utilize the IconContext to specify a className or apply an inline style directly.

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

Component:

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

CSS:

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

Execute ./build-script.sh to build the entire project. For additional details, review the CI scripts.

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

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

cd ../preview
yarn start

Our demo utilizes the Create React App framework with react-icons-ng as an integrated dependency, allowing seamless testing.

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

cd ../demo
yarn start

SVG enjoys universal support across major browsers. Using react-icons-ng, you can deliver only required icons to users, reducing loading times and clearly identifying utilized icons in your project.

• react-svg-morph
• react-icons

Released under the MIT License.

Note: Icons originate from various projects, so it's crucial to review the respective project licenses.