@react-native-vector-icons/common 0.0.1-alpha.8 → 11.0.0-alpha.1

package/react-native-vector-icons.podspec

@@ -11,66 +11,91 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "12.0", :tvos => "9.0" }
-  s.source       = { :git => "https://github.com/react-native-vector-icons/react-native-vector-icons.git", :tag => "#{s.version}" }
+  s.platforms    = { :ios => min_ios_version_supported, :tvos => "9.0", :visionos => "1.0" }
+  s.source       = { :git => package["repository"]["url"], :tag => "v#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm}"
+  s.source_files = "ios/**/*.{h,m,mm,cpp}"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+
+    # Don't install the dependencies when we run `pod install` in the old architecture.
+    if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig    = {
+          "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+          "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+          "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+      }
+      s.dependency "React-Codegen"
+      s.dependency "RCT-Folly"
+      s.dependency "RCTRequired"
+      s.dependency "RCTTypeSafety"
+      s.dependency "ReactCommon/turbomodule/core"
+    end
+  end
 
   s.script_phase = {
     :name => 'Copy Fonts',
     :script => "
       set -e
 
-      # NOTE: This whole script is a bit of a hack
+      # This script borrows from the standard resource copy script https://gist.github.com/vonovak/d8f1a37804438f05bae22be1e8cd53c1
       # We need two key bits of information
-      # Project Root - Always above the pods dir
+      # Project Root - Where the package.json for the RN app lives
       # Xcode Build Dir to copy the fonts into - We look for the directory that ends in .app
 
-      echo START:RNVI_COPY_FONTS
+      echo \"(RNVI) START_COPY_FONTS\"
+
+      echo \"(RNVI) PWD: $(pwd)\"
 
-      echo PWD: $(pwd)
-      echo PODS_ROOT: \"$PODS_ROOT\"
-      echo PODS_CONFIGURATION_BUILD_DIR: \"$PODS_CONFIGURATION_BUILD_DIR\"
+      #############
+      # Find the fonts we need to copy
+      #############
 
+      # Assume the project root is always two directories above the POD_ROOT
+      echo \"(RNVI) PODS_ROOT: $PODS_ROOT\"
       PROJECT_ROOT=\"${PODS_ROOT}/../..\"
-      echo \"PROJECT_ROOT: $PROJECT_ROOT\"
+      echo \"(RNVI) PROJECT_ROOT: $PROJECT_ROOT\"
+
+      # Items we need to copy for rsync
+      RESOURCES_TO_COPY=${PODS_ROOT}/resources-to-copy-${TARGETNAME}.txt
+
+      node \"${PODS_TARGET_SRCROOT}/lib/commonjs/scripts/getFonts.js\" \"$PROJECT_ROOT\"/package.json > \"$RESOURCES_TO_COPY\"
 
+      #############
+      # Find the destination we copy to
+      #############
+
+      echo \"(RNVI) PODS_CONFIGURATION_BUILD_DIR: $PODS_CONFIGURATION_BUILD_DIR\"
       XCODE_DIR=$(ls -d \"$PODS_CONFIGURATION_BUILD_DIR\"/*.app)
-      DEST_DIR=\"${XCODE_DIR}/react-native-vector-icons\"
-      echo XCODE_DIR: \"$XCODE_DIR\"
-      echo DEST_DIR: \"$DEST_DIR\"
+      echo \"(RNVI) XCODE_DIR: $XCODE_DIR\"
+      DEST_DIR=\"${XCODE_DIR}\"
+      echo \"(RNVI) DEST_DIR: $DEST_DIR\"
+      echo I $INSTALL_DIR
       mkdir -p \"$DEST_DIR\"
 
-      FONT_LIST=$(node \"#{__dir__}/lib/commonjs/scripts/getFonts.js\" \"$PROJECT_ROOT\")
-      for font in $FONT_LIST; do
-        echo Copying font $font
-        cp $font \"$DEST_DIR\"
-      done
+      #############
+      # Copy the fonts
+      #############
+      echo \"(RNVI) Copying the following files to $DEST_DIR\"
+      cat \"$RESOURCES_TO_COPY\" | sed 's/^/(RNVI) /'
+
+      # NOTE: Should we add --delete and remove old fonts automagically? NOt doing it yet as it feels risky
+      rsync -avr --copy-links --no-relative --exclude '*/.svn/*' --files-from=\"$RESOURCES_TO_COPY\" / \"$DEST_DIR\"
+      # TODO: How do we test this is right?
+      if [[ \"${ACTION}\" == \"install\" ]] && [[ \"${SKIP_INSTALL}\" == \"NO\" ]]; then
+        mkdir -p \"${INSTALL_DIR}/react-native-vector-icons\"
+        rsync -avr --copy-links --no-relative --exclude '*/.svn/*' --files-from=\"$RESOURCES_TO_COPY\" / \"${INSTALL_DIR}/react-native-vector-icons\"
+      fi
+
+      rm -f \"$RESOURCES_TO_COPY\"
 
-      echo END:RNVI_COPY_FONTS
+      echo \"(RNVI) END:RNVI_COPY_FONTS\"
     ",
   }
-
-  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
-  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
-  if respond_to?(:install_modules_dependencies, true)
-    install_modules_dependencies(s)
-  else
-  s.dependency "React-Core"
-
-  # Don't install the dependencies when we run `pod install` in the old architecture.
-  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-    s.pod_target_xcconfig    = {
-        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-    }
-    s.dependency "React-Codegen"
-    s.dependency "RCT-Folly"
-    s.dependency "RCTRequired"
-    s.dependency "RCTTypeSafety"
-    s.dependency "ReactCommon/turbomodule/core"
-   end
-  end
 end

package/react-native.config.js

@@ -0,0 +1,13 @@
+/**
+ * @type {import('@react-native-community/cli-types').UserDependencyConfig}
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        // NOTE: We aren't shipping generated files as this eesm to break react 0.73 due to missing include paths for react-native
+        cmakeListsPath: 'build/generated/source/codegen/jni/CMakeLists.txt',
+      },
+    },
+  },
+};

package/src/NativeVectorIcons.ts

@@ -2,11 +2,9 @@ import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
 
 export interface Spec extends TurboModule {
-  getImageForFont(fontName: string, glyph: string, fontSize: number, color: number): Promise<string>;
+  getImageForFont(fontFamilyName: string, glyph: string, fontSize: number, color: number): Promise<string>;
 
-  getImageForFontSync(fontName: string, glyph: string, fontSize: number, color: number): string;
-
-  loadFontWithFileName(fontFileName: string, extension: string, subdirectory?: string): Promise<void>;
+  getImageForFontSync(fontFamilyName: string, glyph: string, fontSize: number, color: number): string;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('VectorIcons');

package/src/create-icon-set.tsx

@@ -1,14 +1,25 @@
-import React, { forwardRef, type Ref } from 'react';
+import React, { forwardRef, type Ref, useEffect } from 'react';
 
 import { PixelRatio, Platform, Text, type TextProps, type TextStyle, processColor } from 'react-native';
 
 import NativeIconAPI from './NativeVectorIcons';
 import createIconSourceCache from './create-icon-source-cache';
+import { dynamicLoader } from './dynamicLoading/dynamic-font-loading';
+import { isDynamicLoadingEnabled } from './dynamicLoading/dynamic-loading-setting';
+import type { FontSource } from './dynamicLoading/types';
 import ensureNativeModuleAvailable from './ensure-native-module-available';
 
 export const DEFAULT_ICON_SIZE = 12;
 export const DEFAULT_ICON_COLOR = 'black';
 
+type ValueData = { uri: string; scale: number };
+type GetImageSourceSyncIconFunc<GM> = (name: GM, size?: number, color?: TextStyle['color']) => ValueData | undefined;
+type GetImageSourceIconFunc<GM> = (
+  name: GM,
+  size?: number,
+  color?: TextStyle['color'],
+) => Promise<ValueData | undefined>;
+
 export type IconProps<T> = TextProps & {
   name: T;
   size?: number;
@@ -16,20 +27,53 @@ export type IconProps<T> = TextProps & {
   innerRef?: Ref<Text>;
 };
 
-export const createIconSet = <GM extends Record<string, number>>(
+type IconComponent<GM extends Record<string, number>> = React.FC<
+  TextProps & {
+    name: keyof GM;
+    size?: number;
+    color?: TextStyle['color'];
+    innerRef?: Ref<Text>;
+  } & React.RefAttributes<Text>
+> & {
+  getImageSource: GetImageSourceIconFunc<keyof GM>;
+  getImageSourceSync: GetImageSourceSyncIconFunc<keyof GM>;
+};
+
+export type CreateIconSetOptions = {
+  postScriptName: string;
+  fontFileName: string;
+  fontSource?: FontSource;
+  fontStyle?: TextProps['style'];
+};
+
+export function createIconSet<GM extends Record<string, number>>(
   glyphMap: GM,
-  fontFamily: string,
-  fontFile: string,
+  postScriptName: string,
+  fontFileName: string,
   fontStyle?: TextProps['style'],
-) => {
-  // Android doesn't care about actual fontFamily name, it will only look in fonts folder.
-  const fontBasename = fontFile ? fontFile.replace(/\.(otf|ttf)$/, '') : fontFamily;
+): IconComponent<GM>;
+export function createIconSet<GM extends Record<string, number>>(
+  glyphMap: GM,
+  options: CreateIconSetOptions,
+): IconComponent<GM>;
+export function createIconSet<GM extends Record<string, number>>(
+  glyphMap: GM,
+  postScriptNameOrOptions: string | CreateIconSetOptions,
+  fontFileNameParam?: string,
+  fontStyleParam?: TextProps['style'],
+): IconComponent<GM> {
+  const { postScriptName, fontFileName, fontStyle } =
+    typeof postScriptNameOrOptions === 'string'
+      ? { postScriptName: postScriptNameOrOptions, fontFileName: fontFileNameParam, fontStyle: fontStyleParam }
+      : postScriptNameOrOptions;
+
+  const fontBasename = fontFileName ? fontFileName.replace(/\.(otf|ttf)$/, '') : postScriptName;
 
   const fontReference = Platform.select({
-    windows: `/Assets/${fontFile}#${fontFamily}`,
+    windows: `/Assets/${fontFileName}#${postScriptName}`,
     android: fontBasename,
     web: fontBasename,
-    default: fontFamily,
+    default: postScriptName,
   });
 
   const resolveGlyph = (name: keyof GM) => {
@@ -45,14 +89,37 @@ export const createIconSet = <GM extends Record<string, number>>(
   const Icon = ({
     name,
     size = DEFAULT_ICON_SIZE,
-    color,
+    color = DEFAULT_ICON_COLOR,
     style,
     children,
     allowFontScaling = false,
     innerRef,
     ...props
   }: IconProps<keyof GM>) => {
-    const glyph = name ? resolveGlyph(name as string) : '';
+    const [isFontLoaded, setIsFontLoaded] = React.useState(
+      isDynamicLoadingEnabled() ? dynamicLoader.isLoaded(fontReference) : true,
+    );
+    const glyph = isFontLoaded && name ? resolveGlyph(name) : '';
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the dependencies never change
+    useEffect(() => {
+      let isMounted = true;
+
+      if (
+        !isFontLoaded &&
+        typeof postScriptNameOrOptions === 'object' &&
+        typeof postScriptNameOrOptions.fontSource !== 'undefined'
+      ) {
+        dynamicLoader.loadFontAsync(fontReference, postScriptNameOrOptions.fontSource).finally(() => {
+          if (isMounted) {
+            setIsFontLoaded(true);
+          }
+        });
+      }
+      return () => {
+        isMounted = false;
+      };
+    }, []);
 
     const styleDefaults = {
       fontSize: size,
@@ -150,30 +217,10 @@ export const createIconSet = <GM extends Record<string, number>>(
     }
   };
 
-  const loadFont = async () => {
-    if (Platform.OS !== 'ios') {
-      return;
-    }
-    ensureNativeModuleAvailable();
-
-    const [filename, extension] = fontFile.split('.'); // FIXME: what if filename has two dots?
-    if (!filename) {
-      // NOTE: Thie is impossible but TypeScript doesn't know that
-      throw new Error('Font needs a filename.');
-    }
-    if (!extension) {
-      throw new Error('Font needs a filename extensison.');
-    }
-
-    await NativeIconAPI.loadFontWithFileName(filename, extension, 'react-native-vector-icons');
-  };
-
-  loadFont();
-
   const IconNamespace = Object.assign(WrappedIcon, {
     getImageSource,
     getImageSourceSync,
   });
 
   return IconNamespace;
-};
+}

package/src/dynamicLoading/dynamic-font-loading.ts

@@ -0,0 +1,97 @@
+/*
+ * The following imports are always present when react native is installed
+ * in the future, more explicit apis will be exposed by the core, including typings
+ * */
+// @ts-expect-error missing types
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { getAssetByID } from '@react-native/assets-registry/registry';
+import type { Image } from 'react-native';
+// @ts-expect-error missing types
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+import { getErrorCallback } from './dynamic-loading-setting';
+import type { DynamicLoader, FontSource } from './types';
+
+const loadPromises: { [fontSource: string]: Promise<void> } = {};
+
+const loadFontAsync = async (fontFamily: string, fontSource: FontSource): Promise<void> => {
+  const expoModules = globalThis?.expo?.modules;
+  if (!expoModules) {
+    throw new Error('Expo is not available. Dynamic font loading is not available.');
+  }
+
+  if (loadPromises[fontFamily]) {
+    return loadPromises[fontFamily];
+  }
+
+  loadPromises[fontFamily] = (async function LoadFont() {
+    try {
+      const localUri = await (() => {
+        if (typeof fontSource === 'string') {
+          // a local filesystem uri
+          return fontSource;
+        }
+        // a module id
+        const { uri, type, hash } = getLocalFontUrl(fontSource, fontFamily);
+        return expoModules.ExpoAsset.downloadAsync(uri, hash, type);
+      })();
+
+      await expoModules.ExpoFontLoader.loadAsync(fontFamily, localUri);
+    } catch (error) {
+      console.error(`Failed to load font ${fontFamily}`, error); // eslint-disable-line no-console
+
+      getErrorCallback()?.({
+        error: error as Error,
+        fontFamily,
+        fontSource,
+      });
+    } finally {
+      delete loadPromises[fontFamily];
+    }
+  })();
+
+  return loadPromises[fontFamily];
+};
+
+type AssetRegistryEntry = {
+  name: string;
+  httpServerLocation: string;
+  hash: string;
+  type: string; // file extension
+};
+
+const getLocalFontUrl = (fontModuleId: number, fontFamily: string) => {
+  const assetMeta: AssetRegistryEntry = getAssetByID(fontModuleId);
+  if (!assetMeta) {
+    throw new Error(`no asset found for font family "${fontFamily}", moduleId: ${String(fontModuleId)}`);
+  }
+
+  const resolver: typeof Image.resolveAssetSource = resolveAssetSource;
+  const assetSource = resolver(fontModuleId);
+
+  return { ...assetMeta, ...assetSource };
+};
+
+const loadedFontsCache: { [name: string]: boolean } = {};
+
+const isLoadedNative = (fontFamily: string) => {
+  if (fontFamily in loadedFontsCache) {
+    return true;
+  }
+
+  const { expo } = globalThis;
+  if (!expo) {
+    throw new Error('Expo is not available. Dynamic font loading is not available.');
+  }
+
+  const loadedNativeFonts = expo.modules.ExpoFontLoader.getLoadedFonts();
+  loadedNativeFonts.forEach((font) => {
+    loadedFontsCache[font] = true;
+  });
+
+  return fontFamily in loadedFontsCache;
+};
+
+export const dynamicLoader: DynamicLoader = {
+  isLoaded: isLoadedNative,
+  loadFontAsync,
+};

package/src/dynamicLoading/dynamic-font-loading.web.ts

@@ -0,0 +1,15 @@
+/**
+ * dynamic font loading isn't supported on web
+ * */
+import type { DynamicLoader, FontSource } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const loadFontAsync = async (_fontFamily: string, _fontSource: FontSource): Promise<void> => undefined;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const isLoaded = (_fontFamily: string) => true;
+
+export const dynamicLoader: DynamicLoader = {
+  isLoaded,
+  loadFontAsync,
+};

package/src/dynamicLoading/dynamic-loading-setting.ts

@@ -0,0 +1,77 @@
+import type { FontSource } from './types';
+
+declare global {
+  interface ExpoGlobal {
+    modules: {
+      ExpoAsset: {
+        // definition from
+        // https://github.com/expo/expo/blob/1f5a5991d14aad09282d1ce1612b44d30e7e7d3d/packages/expo-asset/ios/AssetModule.swift#L23
+        downloadAsync: (uri: string, hash: string | undefined, type: string) => Promise<string>;
+      };
+      ExpoFontLoader: {
+        // definition from
+        // https://github.com/expo/expo/blob/1f5a5991d14aad09282d1ce1612b44d30e7e7d3d/packages/expo-font/ios/FontLoaderModule.swift#L18
+        getLoadedFonts: () => string[];
+        loadAsync: (fontFamilyAlias: string, fileUri: string) => Promise<void>;
+      };
+    };
+  }
+
+  // eslint-disable-next-line vars-on-top
+  var expo: ExpoGlobal | undefined;
+}
+
+const hasNecessaryExpoModules = !!globalThis.expo?.modules?.ExpoAsset && !!globalThis.expo?.modules?.ExpoFontLoader;
+
+const hasNecessaryExpoFeatures =
+  hasNecessaryExpoModules && typeof globalThis.expo?.modules.ExpoFontLoader.getLoadedFonts === 'function';
+
+let dynamicFontLoadingEnabled = hasNecessaryExpoFeatures;
+
+export const isDynamicLoadingSupported = () => hasNecessaryExpoFeatures;
+
+/**
+ * Set whether dynamic loading of fonts is enabled.
+ * Currently, the presence of Expo Asset and Font Loader modules is a prerequisite for enabling.
+ * In the future, React Native core apis will be used for dynamic font loading.
+ *
+ * @param value - whether dynamic loading of fonts is enabled
+ * @returns `true` if dynamic loading of fonts was successfully set. `false` otherwise.
+ * */
+export const setDynamicLoadingEnabled = (value: boolean): boolean => {
+  if (!hasNecessaryExpoFeatures) {
+    if (process.env.NODE_ENV !== 'production' && !!value) {
+      const message = hasNecessaryExpoModules
+        ? 'Expo is installed, but does not support dynamic font loading. Make sure to use Expo SDK 52 or newer.'
+        : 'Necessary Expo modules not found. Dynamic font loading is not available on Web or when necessary Expo modules are not present.';
+      console.error(message); // eslint-disable-line no-console
+    }
+    return false;
+  }
+
+  dynamicFontLoadingEnabled = !!value;
+
+  return true;
+};
+
+/**
+ * Whether dynamic loading of fonts is enabled.
+ * */
+export const isDynamicLoadingEnabled = () => dynamicFontLoadingEnabled;
+
+type ErrorCallback = (args: {
+  error: Error;
+  fontFamily: string;
+  fontSource: FontSource;
+}) => void;
+
+let dynamicLoadingErrorCallback: undefined | ErrorCallback;
+
+/**
+ * Set a callback to be called when an error occurs during dynamic font loading.
+ * */
+export const setDynamicLoadingErrorCallback = (callback: ErrorCallback) => {
+  dynamicLoadingErrorCallback = callback;
+};
+
+export const getErrorCallback = () => dynamicLoadingErrorCallback;

package/src/dynamicLoading/types.ts

@@ -0,0 +1,10 @@
+// the result of calling require('path')
+type ModuleId = number;
+type LocalFileSystemUri = string;
+
+export type FontSource = ModuleId | LocalFileSystemUri;
+
+export type DynamicLoader = {
+  loadFontAsync: (fontFamily: string, fontSource: FontSource) => Promise<void>;
+  isLoaded: (fontFamily: string) => boolean;
+};

package/src/index.ts

@@ -1,2 +1,49 @@
+import { NativeModules, Platform } from 'react-native';
+
 export { createIconSet, DEFAULT_ICON_SIZE, DEFAULT_ICON_COLOR } from './create-icon-set';
-export type { IconProps } from './create-icon-set';
+export type { IconProps, CreateIconSetOptions } from './create-icon-set';
+export {
+  setDynamicLoadingEnabled,
+  isDynamicLoadingEnabled,
+  isDynamicLoadingSupported,
+  setDynamicLoadingErrorCallback,
+} from './dynamicLoading/dynamic-loading-setting';
+
+const LINKING_ERROR = `
+  The package '@react-native-vector-icons/common' doesn't seem to be linked. Make sure:
+    ${Platform.select({ ios: "- You have run 'pod install'\n", default: '' })}
+    - You rebuilt the app after installing the package\n'
+    - You are not using Expo Go
+  `;
+
+// @ts-expect-error : NativeModules type is incomplete
+const isTurboModuleEnabled = global.__turboModuleProxy != null; // eslint-disable-line no-underscore-dangle
+
+const VectorIconsModule = isTurboModuleEnabled
+  ? require('./NativeVectorIcons').default // eslint-disable-line @typescript-eslint/no-require-imports
+  : NativeModules.VectorIcons;
+
+const VectorIcons = VectorIconsModule
+  ? VectorIconsModule
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      },
+    );
+
+// TODO: Do we want to expose this as a public API?
+export function getImageForFont(
+  fontFamilyName: string,
+  glyph: string,
+  fontSize: number,
+  color: number,
+): Promise<string> {
+  return VectorIcons.getImageForFont(fontFamilyName, glyph, fontSize, color);
+}
+
+export function getImageForFontSync(fontFamilyName: string, glyph: string, fontSize: number, color: number): string {
+  return VectorIcons.getImageForFontSync(fontFamilyName, glyph, fontSize, color);
+}

package/src/scripts/common.ts

@@ -0,0 +1,52 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { resolveNodeModuleDir } from '@react-native-community/cli-tools';
+
+const getPackageJson = (filename: string) => {
+  const packageData = fs.readFileSync(filename, 'utf-8');
+  const packageJson = JSON.parse(packageData);
+
+  return packageJson;
+};
+
+const getPackageFontDirectories = (packageJsonFilename: string) => {
+  const rootPackageJson = getPackageJson(packageJsonFilename);
+  const dependencies = Object.keys(rootPackageJson.dependencies || {});
+
+  const packageDirs: string[] = [];
+  dependencies.forEach((dependency) => {
+    const dir = resolveNodeModuleDir(packageJsonFilename, dependency);
+    const packageJson = getPackageJson(`${dir}/package.json`);
+    if (packageJson.keywords?.includes?.('react-native-vector-icons-icon')) {
+      packageDirs.push(`${dir}/fonts`);
+    }
+  });
+
+  return packageDirs;
+};
+
+const getLocalFontsDir = (packageJsonFilename: string) => {
+  const rootPackageJson = getPackageJson(packageJsonFilename);
+  const config = rootPackageJson.reactNativeVectorIcons || {};
+
+  return `${path.dirname(packageJsonFilename)}/${config.fontDir || 'rnvi-fonts'}`;
+};
+
+const getFonts = (fontDir: string) => {
+  if (!fs.existsSync(fontDir)) {
+    return [];
+  }
+
+  const fonts = fs.readdirSync(fontDir);
+  const fontPaths = fonts.map((font) => `${fontDir}/${font}`);
+
+  return fontPaths;
+};
+
+export const getFontPaths = (packageJsonFilename: string) => {
+  const packageDirs = getPackageFontDirectories(packageJsonFilename);
+  packageDirs.push(getLocalFontsDir(packageJsonFilename));
+  const fonts = packageDirs.map(getFonts);
+
+  return fonts.flat();
+};