Skip to content

Onemind-Services-LLC/react-icons-ng

Repository files navigation


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:

πŸ“œ License:

Released under the MIT License.

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