mx-rn-vector-icons
v0.1.11
Published
Welcome to mx-react-native-icons, the ultimate icon library for React Native! Designed to provide developers with a rich set of vector icons, mx-react-native-icons ensures your app looks sleek, modern, and visually appealing. Whether you're building a new
Downloads
21
Maintainers
Readme
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:
Table of Contents
Bundled Icon Sets
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 theFonts
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:
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
(NOTandroid/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 intoandroid/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 withinandroid/app/src/main/java/...
) as shown below (note that there aretwo
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!')}
/>;
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library