rn-parts / rn-icons Goto Github PK

react-native version of react-icons

Include popular icons in your React Native projects easily with rn-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

yarn add react-native-svg rn-icons
# or
npm install react-native-svg rn-icons --save
# or
pnpm install react-native-svg rn-icons

cd ios && pod install # for react-native-svg

example usage

import { FaBeer } from "rn-icons/fa";

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

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

Checkout this website: https://react-icons.github.io/react-icons/. you can view all icons.

and replace library name from react-icons to rn-icons will be ok.

You can add more icons by submitting into react-icons with pull requests or creating issues. And this repo with be sync.

You can configure rn-icons props using React Context API.

Requires React 16.3 or higher.

import { IconContext } from "rn-icons";

<IconContext.Provider value={{ color: "blue" }}>
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>;

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

pnpm install
cd packages/react-icons
pnpm fetch  # fetch icon sources
pnpm build

Check react-icons

TODO

In React native, use fonts is hard to maintain, and its must be touch native code which react native dont like. With rn-icons, 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.

• react-icons

MIT

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