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.

🚀 Installation (for Modern Projects)

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

How to Use?

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';

🚀 Installation (for MeteorJS, GatsbyJS, etc.)

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

How to Use?

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

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

Icons

[//]: # START_VERSION

Icon Library	License	Version	Count
Ant Design Icons	MIT	@ant-design/[email protected]	831
BoxIcons	MIT	9ffa9136e8681886bb7bd2145cd4098717ce1c11	1634
Bootstrap Icons	MIT	v1.11.3-34-g9ee0d19	2716
css.gg	MIT	2.1.1-1-gdeea4fa	704
Circum Icons	MPL-2.0 license	v2.0.2-22-gcec1364	288
Coolicons	CC BY 4.0 License	v4.1-1-g1a92717	442
CoreUI Icons	MIT	v3.0.0-3-g4b1f387	556
EOS Icons	MIT	v5.4.0-4-ga21c4b9	156
Font Awesome 5	CC BY 4.0 License	5.15.4-3-gafecf2a	1612
Font Awesome 6	CC BY 4.0 License	6.6.0	2050
Flat Color Icons	MIT	v1.0.2-27-g8eccbbb	329
Feather	MIT	v4.29.2	287
Fluent System Icons	MIT	1.1.252	4498
Github Octicons icons	MIT	v19.11.0	305
US Government Icons	SIL OFL 1.1	1.6.0-2-g1d9f467	136
Game Icons	CC BY 3.0	12920d6565588f0512542a3cb0cdfd36a497f910	4040
Grommet-Icons	Apache License Version 2.0	v4.12.1-5-gf9548ca	635
Health Icons	MIT	0080186d2a55e828e2f3f0544d4abec4fa68c32e	1374
Heroicons	MIT	v2.1.5-2-g56c073c	1288
Iconoir	MIT	v7.8.0-1-gc922ad1	1597
IcoMoon Free	CC BY 4.0 License	d006795ede82361e1bac1ee76f215cf1dc51e4ca	491
Ionicons 5	MIT	5.5.4	1332
Jam Icons	MIT	3.1.0-2-gc8501b1	940
Icons8 Line Awesome	MIT	v1.2.1-10-g78a1012	1544
Lucide	ISC	0.417.0	1508
MingCute icons	Apache License Version 2.0	v2.94-3-g98419b1	2926
Material Design icons	Apache License Version 2.0	4.0.0-110-g484b1b8903	6478
Material Design icons 2	Apache License Version 2.0	ce55b68ba7308fef54003d5c588343eeac30ff7a	7447
Openmoji	CC BY-SA 4.0	15.0.0-52-gf6c0046	4166
Phosphor Icons	MIT	v2.0.8-12-g7790ae5	9072
Polaris	MIT	@shopify/[email protected]	534
Remix Icon	Apache License Version 2.0	v4.3.0-2-g075c090	2892
Radix Icons	MIT	@radix-ui/[email protected]	318
Simple Icons	CC0 1.0 Universal	4.14.0-2621-g6f2848d	3158
Simple Line Icons	MIT	v2.5.5	189
Streamline	CC BY 4.0 License	1.0-1-g54e5a69	1000
Tabler Icons	MIT	v3.11.0	5450
Themify Icons	MIT	v0.1.2-2-g9600186	352
Typicons	CC BY-SA 3.0	v2.1.2	336
VS Code Icons	CC BY 4.0	0.0.35-49-geaa0306	462
Weather Icons	SIL OFL 1.1	2.0.12-7-gbb80982	219

Total Count of Icons: 76292

[//]: # END_VERSION

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

🔧 Configuration

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

Key	Default	Description
color	undefined (inherit)	Icon color
size	1em	Icon size
className	undefined	Add custom classes
style	undefined	Inline styles, can override size and color
attr	undefined	Extra attributes, may be overwritten by others
title	undefined	Describes the icon for accessibility purposes

🎨 CSS Adjustments

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.

Set Global Inline Styling:

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

Define Global className Styling:

Component:

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

CSS:

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

💡 Contributing

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

🛠 Development Workflow:

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

📺 Preview Setup:

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

cd ../preview
yarn start

🎥 Demo Insights:

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

🖼 Why React SVG Components Over Fonts?

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.

🌐 Related Projects:

• react-svg-morph
• react-icons

📜 License:

Released under the MIT License.

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