npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

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

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

  1. Install the package via npm:
    npm install --save react-native-vector-icons
  2. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions.
  3. 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!')}
/>;

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