Mx-rn-vector-icons NPM

mx-rn-vector-icons

Welcome to mx-rn-vector-icons, the ultimate icon library for React Native! Designed to provide developers with a rich set of vector icons, mx-rn-vector-icons ensures your app looks sleek, modern, and visually appealing. Whether you're building a new project or enhancing an existing one, our library offers a wide array of icons to suit every need.

Note: This library is built on top of react-native-vector-icons. To use mx-rn-vector-icons, you need to install react-native-vector-icons as well. Follow the installation steps below to get started:

Bundled Icon Sets

Explore all icons.

AntDesign from AntFinance (298 icons)
Entypo by Daniel Bruce (v1.0.1 with 411 icons)
EvilIcons designed by Alexander Madyankin & Roman Shamin (v1.10.1 with 70 icons)
Feather created by Cole Bemis & Contributors (v4.28.0 featuring 286 icons)
FontAwesome by Dave Gandy (v4.7.0 containing 675 icons)
FontAwesome 5 from Fonticons, Inc. (v5.15.3 offering 1598 free and 7848 pro icons)
FontAwesome 6 designed by Fonticons, Inc. (v6.1.2 featuring 2016 free and 16150 pro icons)
Fontisto created by Kenan Gündoğan (v3.0.4 featuring 615 icons)
Foundation by ZURB, Inc. (v3.0 with 283 icons)
Ionicons crafted by Ionic (v7.1.0 containing 1338 icons)
MaterialIcons by Google, Inc. (v4.0.0 featuring 2189 icons)
MaterialCommunityIcons from MaterialDesignIcons.com (v6.5.95 including 6596 icons)
Octicons designed by Github, Inc. (v16.3.1 with 250 icons)
Zocial by Sam Collins (v1.4.0 with 100 icons)
SimpleLineIcons crafted by Sabbir & Contributors (v2.5.5 with 189 icons)

Installation

Install the package via npm:

npm install --save react-native-vector-icons

Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions.
If you're planning to use FontAwesome 5 or 6 icons, refer to these guides: FontAwesome 5 | FontAwesome 6

iOS Setup

To use the bundled icons on iOS, follow these steps:

Navigate to node_modules/react-native-vector-icons and drag the Fonts folder (or select specific fonts) into your Xcode project.
- Make sure your app is checked under "Add to targets," and if adding the whole folder, check "Create groups."
- Not familiar with Xcode? Check out this article.

Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode autocomplete is not working):

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>FontAwesome6_Brands.ttf</string>
  <string>FontAwesome6_Regular.ttf</string>
  <string>FontAwesome6_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

Above step might look something like this:

XCode screenshot

In Xcode, select your project in the navigator, choose your app's target, go to the Build Phases tab, and under Copy Bundle Resources, add the copied fonts.
When using auto linking, it will automatically add all fonts to the Build Phases, Copy Pods Resources. Which will end up in your bundle. To avoid that, create a react-native.config.js file at the root of your react-native project with:
```
module.exports = {
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
      },
    },
  },
};
```

Note: Recompile your project after adding new fonts.

Note 2: If you're getting problems with duplicate outputs file for fonts on ios build, try running cd ios && pod install after the react-native.config.js configuration.

Android Setup

Option: With Gradle (recommended)

To make font management smoother on Android, use this method:

Edit android/app/build.gradle (NOT android/build.gradle) and add:

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

To customize the fonts being copied, use:

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Specify font files
]

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

your-monorepo/
├─ node_modules/
│  ├─ react-native-vector-icons
├─ apps/
│  ├─ YourApp/
│  │  ├─ android/
│  │  │  ├─ app/
│  │  │  │  ├─ build.gradle

Update paths like:

project.ext.vectoricons = [
+ iconFontsDir: "../../../../node_modules/react-native-vector-icons/Fonts",
  iconFontNames: ["YourFont.ttf", "..."]
]

- apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+ apply from: "../../../../node_modules/react-native-vector-icons/fonts.gradle

⚠️ Reported issues have arisen when utilizing RNVI versions earlier than 9.0.0 within a monorepo context. Therefore, it's advisable to ensure your RNVI version is 9.0.0 or later.

Option: Manual Integration

Copy the contents from the Fonts folder and paste them into android/app/src/main/assets/fonts (ensure the folder name is lowercase, i.e., fonts).

Integrating Library for `getImageSource` Support

The following steps are optional and are only necessary if you intend to utilize the Icon.getImageSource function.

Edit the android/settings.gradle file as shown below:

rootProject.name = 'MyApp'

include ':app'

+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Edit the android/app/build.gradle (located in the app folder) as shown below:

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  implementation fileTree(dir: "libs", include: ["*.jar"])
  //noinspection GradleDynamicVersion
  implementation "com.facebook.react:react-native:+"  // From node_modules

+ implementation project(':react-native-vector-icons')
}

Edit your MainApplication.java (located deep within android/app/src/main/java/...) as shown below (note that there are two places to edit):

package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
+   , new VectorIconsPackage()
    );
  }

Please note that this optional step is necessary only if your react-native app doesn't support auto-linking; otherwise, you can skip this.

npm install mx-rn-vector-icons

Usage

Icons library : https://oblador.github.io/react-native-vector-icons/

import { MXicon } from 'mx-rn-vector-icons';

// ...

<MXicon
  type={'AntDesign'}
  name={'stepforward'}
  color={'#fff'}
  size={30}
  style={{ margin: 10 }}
  onPress={() => alert('Horray!')}
/>;