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 --saveimport { FaBeer } from "@onemind-services-llc/react-icons-ng/fa";
function Question() {
return (
<h3>
How about a <FaBeer />?
</h3>
);
}@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 --saveimport { 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: 76827
[//]: # 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>;| 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 |
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 buildcd packages/react-icons-ng
yarn fetch
yarn build
cd ../preview
yarn startOur 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 startSVG 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.
Released under the MIT License.
Note: Icons originate from various projects, so it's crucial to review the respective project licenses.