React-native-vector-icons: React native auto-link adding all the fonts

[alexmngn]

• [x] Review the documentation: https://github.com/oblador/react-native-vector-icons
• [x] Search for existing issues (including closed ones): https://github.com/oblador/react-native-vector-icons/issues

Environment

React Native 0.60
iOS project

Description

Now that we migrated to React Native 0.60 and use the auto-linking, the library automatically adds a bunch of fonts I don't need in my iOS project as I use my own personal font with my own icons in it.

Is there a way to ignore all of this so it doesn't get added to my project?

"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Feather.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",

[radiosilence]

Ok, so we solved this by adding a .yarnclean file in our project route and doing a rimraf and yarn install:

./.yarnclean
.gitignore AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf Fontisto.ttf Foundation.ttf Ionicons.ttf MaterialCommunityIcons.ttf MaterialIcons.ttf Octicons.ttf SimpleLineIcons.ttf Zocial.ttf

[Jpoliachik]

Even if you disable autolinking for iOS via react-native.config.js in project:

module.exports = {
  dependencies: {
    "react-native-vector-icons": {
      platforms: {
        ios: null,
      },
    },
  },
};

It still adds everything inside node_modules/react-native-vector-icons/Fonts directory to the iOS Project.

I'm not sure if there's a way to override how react-native-vector-icons declares the Font assets - I can't find much info on the react-native.config.js schema.

In the meantime, I solved by adding a postinstall script to package.json.
This script removes the /Fonts directory from react-native-vector-icons completely. If you want a single font, modify the script to only remove the fonts you don't use.

package.json:

"scripts": {
    "postinstall": "node ./scripts/postinstall.js"
}

postinstall.js:

const fs = require("fs-extra");

const PROJECT_ROOT = ".";

// https://github.com/oblador/react-native-vector-icons/issues/1077
function reactNativeVectorIconsClean() {
  const iconsDir = `${PROJECT_ROOT}/node_modules/react-native-vector-icons/Fonts`;
  const exists = fs.existsSync(iconsDir);
  if (exists) {
    fs.removeSync(iconsDir);
  }
}

reactNativeVectorIconsClean();

[TomBerriot]

Same issue on our project, it would be nice to customize the fonts loaded as it is done for android 👍

[Damoness]

I have the some problem. I import only one icon into my project , but all the fonts are added to my ipa

[abdelmagied94]

Also, if we run react-native link to link the custom fonts. All the fonts is added in the project bundle resources which cause multiple resources issue (The fonts exist two times one in the pods resource and the other in the bundle resources) 😞

[thanhcuong1990]

I've got the same issue. I just need to use my custom font.
My idea is try to delete the Fonts folder from react-native-vector-icons in pod pre_install hook. Hope this help!

Podfile

pre_install do |installer|
  FileUtils.rm_rf('../node_modules/react-native-vector-icons/Fonts')
end

[Monte9]

I ran into this exact issue - we have a brownfield app and I only wanted to use 1 font MaterialCommunityIcons.ttf from rn-vector-icons. So I was trying to figure out how to only link that 1 font in the Copy pod resources step in Build Phases.

My idea is to try to delete the Fonts folder from react-native-vector-icons in pod pre_install hook. Hope this help!

@thanhcuong1990 that's the right approach but turns about pre_install isn't a thing anymore in Podfile. So here's what I came up with instead!

## React Native Vector Icons
## Deletes all the fonts except MaterialCommunityIcons.ttf
fonts_path = "node_modules/react-native-vector-icons/Fonts/"
fonts = Dir.glob(fonts_path + "*.ttf")

fonts.each do |font|
    material_community_icons = fonts_path + "MaterialCommunityIcons.ttf"

    if font != material_community_icons
        # Delete unused font
        FileUtils.rm font
    end
end
puts "Deleted unused RNVectorIcons fonts"

# React Native Autolinking (for third-party dependencies)
# https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
use_native_modules!

This works like a charm! Hope it helps y'all.

[abdelmagied94]

I resolved this issue by disabling auto-linking for the package and add the fonts I need to the assets. This is done by modifying react-native.config.js to the following:

const VECTOR_ICONS_FONTS_PATH = "./node_modules/react-native-vector-icons/Fonts"
const VECTOR_FONTS = ["FontAwesome.ttf"]

module.exports = {
  assets: ["./src/res/fonts/"],
  dependencies: {
    // Disable auto linking for `react-native-vector-icons` and link
    // the required fonts manually to avoid duplicate resources issue in iOS.
    "react-native-vector-icons": {
      platforms: {
        ios: null,
        android: null,
      },
      assets: VECTOR_FONTS.map((font) => VECTOR_ICONS_FONTS_PATH + "/" + font),
    },
  },
}

[SudoPlz]

To improve @abdelmagied94 's answer, you don't need the

      platforms: {
        ios: null,
        android: null,
      },

part

this is all you need in your react-native-config.js file:

const VECTOR_FONTS = ['FontAwesome.ttf', 'Ionicons.ttf'] // whichever fonts you want to keep
module.exports = {
     //... whatever your config has in it

    'react-native-vector-icons': {
          assets: VECTOR_FONTS.map((font) => './node_modules/react-native-vector-icons/Fonts/' + font),
    },
}

[yahveh]

@SudoPlz no effect,any details?

[SudoPlz]

@yahveh what do you mean? Didn't it work for you?

[yahveh]

@SudoPlz unfortunately not work for me.

react-native init a new project for testing, failed.

react-native init test
cd test
yarn add react-native-vector-icons
cd ios
pod install
react-native run-ios

open the dir showed, all fonts added, dont't known what i missed.

This is my testing, can work.
change RNVectorIcons.podspec ===> s.resources = "Fonts/Custom.ttf".

but i like yours...

[camel113]

I created a react-native.config.js at the root of my project as @abdelmagied94 or @SudoPlz suggested.
After that I deleted my node_moduels folder, ran a npm install and a pod install... Did not work, all the fonts are still imported in my project.pbxproj
My react-native.config.js

const VECTOR_ICONS_FONTS_PATH = "./node_modules/react-native-vector-icons/Fonts";
const VECTOR_FONTS = ["MaterialCommunityIcons.ttf"];

module.exports = {
  dependencies: {
    // Disable auto linking for `react-native-vector-icons` and link
    // the required fonts manually to avoid duplicate resources issue in iOS.
    "react-native-vector-icons": {
      assets: VECTOR_FONTS.map(font => VECTOR_ICONS_FONTS_PATH + "/" + font)
    }
  }
};