@react-native-vector-icons/common 12.4.1 → 13.0.0

package/lib/typescript/module/src/get-image-library.d.ts

@@ -1,5 +1,9 @@
-export declare const ensureGetImageAvailable: () => typeof import("@react-native-vector-icons/get-image") | {
-    getImageForFont: (fontReference: string, glyph: string, size: number, color: number) => Promise<string>;
-    getImageForFontSync: () => never;
+import type { ImageOptions } from '@react-native-vector-icons/get-image';
+import type { ImageResult } from './create-icon-source-cache';
+type GetImageAPI = {
+    getImageForFont(glyph: string, options: ImageOptions): Promise<ImageResult>;
+    getImageForFontSync(glyph: string, options: ImageOptions): ImageResult;
 };
+export declare const ensureGetImageAvailable: () => GetImageAPI;
+export {};
 //# sourceMappingURL=get-image-library.d.ts.map

package/lib/typescript/module/src/get-image-library.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-image-library.d.ts","sourceRoot":"","sources":["../../../../src/get-image-library.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,uBAAuB;qCAQS,MAAM,SAAS,MAAM,QAAQ,MAAM,SAAS,MAAM;;CAgB9F,CAAC"}
+{"version":3,"file":"get-image-library.d.ts","sourceRoot":"","sources":["../../../../src/get-image-library.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAc9D,KAAK,WAAW,GAAG;IACjB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5E,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,WAAW,CAAC;CACxE,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAO,WAwB1C,CAAC"}

package/lib/typescript/module/src/get-image-source.d.ts

@@ -1,11 +1,10 @@
 import type { TextStyle } from 'react-native';
-import type createIconSourceCache from './create-icon-source-cache';
-export declare const getImageSourceSync: (imageSourceCache: ReturnType<typeof createIconSourceCache>, fontReference: string, glyph: string, size?: number, color?: TextStyle["color"]) => {
-    uri: string;
-    scale: number;
+import type { createIconSourceCache } from './create-icon-source-cache';
+export type GetImageSourceOptions = {
+    size?: number;
+    color?: TextStyle['color'];
+    lineHeight?: number;
 };
-export declare const getImageSource: (imageSourceCache: ReturnType<typeof createIconSourceCache>, fontReference: string, glyph: string, size?: number, color?: TextStyle["color"]) => Promise<{
-    uri: string;
-    scale: number;
-}>;
+export declare const getImageSourceSync: (imageSourceCache: ReturnType<typeof createIconSourceCache>, fontReference: string, glyph: string, options?: GetImageSourceOptions) => import("./create-icon-source-cache").ImageResult;
+export declare const getImageSource: (imageSourceCache: ReturnType<typeof createIconSourceCache>, fontReference: string, glyph: string, options?: GetImageSourceOptions) => Promise<import("./create-icon-source-cache").ImageResult>;
 //# sourceMappingURL=get-image-source.d.ts.map

package/lib/typescript/module/src/get-image-source.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-image-source.d.ts","sourceRoot":"","sources":["../../../../src/get-image-source.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,qBAAqB,MAAM,4BAA4B,CAAC;AAIpE,eAAO,MAAM,kBAAkB,GAC7B,kBAAkB,UAAU,CAAC,OAAO,qBAAqB,CAAC,EAC1D,eAAe,MAAM,EACrB,OAAO,MAAM,EACb,aAAwB,EACxB,QAAO,SAAS,CAAC,OAAO,CAAsB;;;CA2B/C,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,kBAAkB,UAAU,CAAC,OAAO,qBAAqB,CAAC,EAC1D,eAAe,MAAM,EACrB,OAAO,MAAM,EACb,aAAwB,EACxB,QAAO,SAAS,CAAC,OAAO,CAAsB;;;EA2B/C,CAAC"}
+{"version":3,"file":"get-image-source.d.ts","sourceRoot":"","sources":["../../../../src/get-image-source.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAmBF,eAAO,MAAM,kBAAkB,GAC7B,kBAAkB,UAAU,CAAC,OAAO,qBAAqB,CAAC,EAC1D,eAAe,MAAM,EACrB,OAAO,MAAM,EACb,UAAU,qBAAqB,qDAQhC,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,kBAAkB,UAAU,CAAC,OAAO,qBAAqB,CAAC,EAC1D,eAAe,MAAM,EACrB,OAAO,MAAM,EACb,UAAU,qBAAqB,8DAQhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-vector-icons/common",
-  "version": "12.4.1",
+  "version": "13.0.0",
   "description": "Customizable Icons for React Native with support for image source and full styling.",
   "source": "./src/index.ts",
   "main": "./lib/commonjs/index.js",
@@ -83,11 +83,15 @@
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
+    "@react-native/assets-registry": "*",
     "react": "*",
     "react-native": "*",
-    "@react-native-vector-icons/get-image": "^12.3.0"
+    "@react-native-vector-icons/get-image": "^13.0.0"
   },
   "peerDependenciesMeta": {
+    "@react-native/assets-registry": {
+      "optional": true
+    },
     "@react-native-vector-icons/get-image": {
       "optional": true
     }

package/src/create-icon-set.tsx

@@ -1,22 +1,25 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import React, { forwardRef, type Ref, useEffect } from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Platform, Text, type TextProps, type TextStyle } from 'react-native';
 
-import createIconSourceCache from './create-icon-source-cache';
+import { createIconSourceCache, type ImageResult } from './create-icon-source-cache';
 import { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from './defaults';
 import { dynamicLoader } from './dynamicLoading/dynamic-font-loading';
 import { isDynamicLoadingEnabled } from './dynamicLoading/dynamic-loading-setting';
 import type { FontSource } from './dynamicLoading/types';
-import { getImageSource as getImageSourceImpl, getImageSourceSync as getImageSourceSyncImpl } from './get-image-source';
-
-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>;
+import {
+  type GetImageSourceOptions,
+  getImageSource as getImageSourceImpl,
+  getImageSourceSync as getImageSourceSyncImpl,
+} from './get-image-source';
+
+type GetImageSourceSyncIconFunc<GM> = {
+  (name: GM, options: GetImageSourceOptions): ImageResult;
+  (name: GM, size?: number, color?: TextStyle['color']): ImageResult;
+};
+type GetImageSourceIconFunc<GM> = {
+  (name: GM, options: GetImageSourceOptions): Promise<ImageResult>;
+  (name: GM, size?: number, color?: TextStyle['color']): Promise<ImageResult>;
+};
 
 export type IconProps<T> = TextProps & {
   name: T;
@@ -82,6 +85,8 @@ export function createIconSet<GM extends GlyphMap>(
     fontStyle: 'normal',
   };
 
+  const fontSource = typeof postScriptNameOrOptions === 'object' && postScriptNameOrOptions?.fontSource;
+
   const resolveGlyph = (name: keyof GM): string => {
     const glyph = glyphMap[name] || '?';
 
@@ -102,21 +107,19 @@ export function createIconSet<GM extends GlyphMap>(
     innerRef,
     ...props
   }: IconProps<keyof GM>) => {
+    const canUseDynamicLoading = !!fontSource && isDynamicLoadingEnabled();
     const [isFontLoaded, setIsFontLoaded] = React.useState(
-      isDynamicLoadingEnabled() ? dynamicLoader.isLoaded(fontReference) : true,
+      canUseDynamicLoading ? dynamicLoader.isLoaded(fontReference) : true,
     );
     const glyph = isFontLoaded && name ? resolveGlyph(name) : '';
 
+    const shouldLoadFontDynamically = !isFontLoaded && canUseDynamicLoading;
     // 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 (shouldLoadFontDynamically) {
+        dynamicLoader.loadFontAsync(fontReference, fontSource).finally(() => {
           if (isMounted) {
             setIsFontLoaded(true);
           }
@@ -134,7 +137,7 @@ export function createIconSet<GM extends GlyphMap>(
 
     const newProps: TextProps = {
       ...props,
-      style: [styleDefaults, style, styleOverrides, fontStyle || {}],
+      style: [styleDefaults, style, styleOverrides, fontStyle],
       allowFontScaling,
     };
 
@@ -153,15 +156,27 @@ export function createIconSet<GM extends GlyphMap>(
 
   const imageSourceCache = createIconSourceCache();
 
-  const getImageSource: GetImageSourceIconFunc<keyof GM> = async (name, size, color) => {
-    if (typeof postScriptNameOrOptions === 'object' && typeof postScriptNameOrOptions.fontSource !== 'undefined') {
-      await dynamicLoader.loadFontAsync(fontReference, postScriptNameOrOptions.fontSource);
+  const getImageSource: GetImageSourceIconFunc<keyof GM> = async (
+    name: keyof GM,
+    sizeOrOptions?: number | GetImageSourceOptions,
+    color?: TextStyle['color'],
+  ) => {
+    const canUseDynamicLoading = !!fontSource && isDynamicLoadingEnabled();
+    if (canUseDynamicLoading && !dynamicLoader.isLoaded(fontReference)) {
+      await dynamicLoader.loadFontAsync(fontReference, fontSource);
     }
-    return getImageSourceImpl(imageSourceCache, fontReference, resolveGlyph(name), size, color);
+    const options = typeof sizeOrOptions === 'object' ? sizeOrOptions : { size: sizeOrOptions, color };
+    return getImageSourceImpl(imageSourceCache, fontReference, resolveGlyph(name), options);
   };
 
-  const getImageSourceSync: GetImageSourceSyncIconFunc<keyof GM> = (name, size, color) =>
-    getImageSourceSyncImpl(imageSourceCache, fontReference, resolveGlyph(name), size, color);
+  const getImageSourceSync: GetImageSourceSyncIconFunc<keyof GM> = (
+    name: keyof GM,
+    sizeOrOptions?: number | GetImageSourceOptions,
+    color?: TextStyle['color'],
+  ) => {
+    const options = typeof sizeOrOptions === 'object' ? sizeOrOptions : { size: sizeOrOptions, color };
+    return getImageSourceSyncImpl(imageSourceCache, fontReference, resolveGlyph(name), options);
+  };
 
   const IconNamespace = Object.assign(WrappedIcon, {
     getImageSource,

package/src/create-icon-source-cache.ts

@@ -1,29 +1,28 @@
-const TYPE_VALUE = 'value';
-const TYPE_ERROR = 'error';
-
-type ValueData = { uri: string; scale: number };
-
-type Value = { type: typeof TYPE_VALUE; data: ValueData } | { type: typeof TYPE_ERROR; data: Error };
-
-export default function createIconSourceCache() {
-  const cache = new Map<string, Value>();
-
-  const setValue = (key: string, value: ValueData) => cache.set(key, { type: TYPE_VALUE, data: value });
-
-  const setError = (key: string, error: Error) => cache.set(key, { type: TYPE_ERROR, data: error });
-
-  const get = (key: string) => {
-    const value = cache.get(key);
-    if (!value) {
-      return undefined;
-    }
-
-    const { type, data } = value;
-    if (type === TYPE_ERROR) {
-      throw data;
-    }
-    return data;
-  };
-
-  return { setValue, setError, get };
+export type ImageResult = {
+  /**
+   * The file URI to the rendered image.
+   */
+  uri: string;
+  /**
+   * Image width in dp.
+   */
+  width: number;
+  /**
+   * Image height in dp.
+   */
+  height: number;
+  /**
+   * Scale factor of the image. Multiply the dp dimensions by this value to get the dimensions in pixels.
+   */
+  scale: number;
+};
+
+export function createIconSourceCache() {
+  const cache = new Map<string, ImageResult>();
+
+  const setValue = (key: string, value: ImageResult) => cache.set(key, value);
+
+  const get = (key: string) => cache.get(key);
+
+  return { setValue, get };
 }

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

@@ -5,7 +5,6 @@
 import { Image, Platform } from 'react-native';
 
 // @ts-expect-error missing types
-// eslint-disable-next-line import/no-extraneous-dependencies,import/no-unresolved
 import { getAssetByID } from '@react-native/assets-registry/registry';
 
 import { assertExpoModulesPresent, getErrorCallback, type LoadAsyncAsset } from './dynamic-loading-setting';

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

@@ -18,15 +18,38 @@ type ExpoFontLoaderModule = {
   loadAsync: (fontFamilyAlias: string, asset: LoadAsyncAsset) => Promise<void>;
 };
 
+// RenderToImageResult needs to be usable as the `source` prop for image,
+// so it must stay compatible with ImageURISource type
+type RenderToImageResult = {
+  /**
+   * The file uri to the image.
+   */
+  uri: string;
+  /**
+   * Image width in dp.
+   */
+  width: number;
+  /**
+   * Image height in dp.
+   */
+  height: number;
+
+  /**
+   * Scale factor of the image. Multiply the dp dimensions by this value to get the dimensions in pixels.
+   * */
+  scale: number;
+};
+
 type ExpoFontUtilsModule = {
   renderToImageAsync: (
     glyph: string,
     options: {
-      fontFamily?: string;
+      fontFamily: string;
       size?: number;
+      lineHeight?: number;
       color?: number;
     },
-  ) => Promise<string>;
+  ) => Promise<RenderToImageResult>;
 };
 
 declare global {

package/src/get-image-library.ts

@@ -1,8 +1,13 @@
+import { processColor } from 'react-native';
+
 import { getIsRenderToImageSupported } from './dynamicLoading/dynamic-loading-setting';
 
-// eslint-disable-next-line import/no-mutable-exports
 let NativeIconAPI: typeof import('@react-native-vector-icons/get-image') | null = null;
 
+import type { ImageOptions } from '@react-native-vector-icons/get-image';
+
+import type { ImageResult } from './create-icon-source-cache';
+
 try {
   // eslint-disable-next-line global-require,import/no-extraneous-dependencies,@typescript-eslint/no-require-imports
   NativeIconAPI = require('@react-native-vector-icons/get-image');
@@ -15,7 +20,12 @@ try {
 const globalRef = globalThis;
 const hasExpoRenderToImage = getIsRenderToImageSupported(globalRef);
 
-export const ensureGetImageAvailable = () => {
+type GetImageAPI = {
+  getImageForFont(glyph: string, options: ImageOptions): Promise<ImageResult>;
+  getImageForFontSync(glyph: string, options: ImageOptions): ImageResult;
+};
+
+export const ensureGetImageAvailable = (): GetImageAPI => {
   if (NativeIconAPI) {
     NativeIconAPI.ensureNativeModuleAvailable();
     return NativeIconAPI;
@@ -23,12 +33,12 @@ export const ensureGetImageAvailable = () => {
   if (hasExpoRenderToImage) {
     const { ExpoFontUtils } = globalRef.expo.modules;
     return {
-      getImageForFont: async (fontReference: string, glyph: string, size: number, color: number) =>
-        ExpoFontUtils.renderToImageAsync(glyph, {
-          fontFamily: fontReference,
-          size,
-          color,
-        }),
+      getImageForFont: async (glyph, options) => {
+        return await ExpoFontUtils.renderToImageAsync(glyph, {
+          ...options,
+          color: processColor(options.color ?? 'black') as number,
+        });
+      },
       getImageForFontSync: () => {
         throw new Error(
           'You attempted to call `getImageForFontSync`. Expo dev client with `@react-native-vector-icons/get-image` installed is required for this. Alternatively, call `getImageForFont` or generate the image yourself and bundle it with the app.',
@@ -37,6 +47,6 @@ export const ensureGetImageAvailable = () => {
     };
   }
   throw new Error(
-    'Error in getImageSource / getImageSourceSync: You need to either (1) install `@react-native-vector-icons/get-image` or (2) use Expo SDK 53+ (Expo dev client or Expo Go). Check your setup and rebuild the app.',
+    'Error in getImageSource / getImageSourceSync: You need to either (1) install `@react-native-vector-icons/get-image` or (2) use Expo SDK 54+ (Expo dev client or Expo Go). Check your setup and rebuild the app.',
   );
 };

package/src/get-image-source.ts

@@ -1,74 +1,56 @@
 import type { TextStyle } from 'react-native';
-import { PixelRatio, processColor } from 'react-native';
 
-import type createIconSourceCache from './create-icon-source-cache';
+import type { createIconSourceCache } from './create-icon-source-cache';
 import { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from './defaults';
 import { ensureGetImageAvailable } from './get-image-library';
 
-export const getImageSourceSync = (
+export type GetImageSourceOptions = {
+  size?: number;
+  color?: TextStyle['color'];
+  lineHeight?: number;
+};
+
+const resolveOptions = (
   imageSourceCache: ReturnType<typeof createIconSourceCache>,
   fontReference: string,
   glyph: string,
-  size = DEFAULT_ICON_SIZE,
-  color: TextStyle['color'] = DEFAULT_ICON_COLOR,
+  { size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR, lineHeight }: GetImageSourceOptions = {},
 ) => {
-  const NativeIconAPI = ensureGetImageAvailable();
-
-  const processedColor = processColor(color);
-  const cacheKey = `${glyph}:${size}:${String(processedColor)}`;
+  const cacheKey = `${glyph}:${size}:${String(color)}:${lineHeight ?? ''}`;
+  const cached = imageSourceCache.get(cacheKey);
+  const nativeOptions = {
+    fontFamily: fontReference,
+    size,
+    color: color as string,
+    lineHeight,
+  };
+  return { cacheKey, cached, nativeOptions };
+};
 
-  const maybeCachedValue = imageSourceCache.get(cacheKey);
-  if (maybeCachedValue !== undefined) {
-    // FIXME: Should this check if it's an error and throw it again?
-    return maybeCachedValue;
-  }
+export const getImageSourceSync = (
+  imageSourceCache: ReturnType<typeof createIconSourceCache>,
+  fontReference: string,
+  glyph: string,
+  options?: GetImageSourceOptions,
+) => {
+  const { cacheKey, cached, nativeOptions } = resolveOptions(imageSourceCache, fontReference, glyph, options);
+  if (cached !== undefined) return cached;
 
-  try {
-    const imagePath = NativeIconAPI.getImageForFontSync(
-      fontReference,
-      glyph,
-      size,
-      processedColor as number, // FIXME what if a non existent colour was passed in?
-    );
-    const value = { uri: imagePath, scale: PixelRatio.get() };
-    imageSourceCache.setValue(cacheKey, value);
-    return value;
-  } catch (error) {
-    imageSourceCache.setError(cacheKey, error as Error);
-    throw error;
-  }
+  const value = ensureGetImageAvailable().getImageForFontSync(glyph, nativeOptions);
+  imageSourceCache.setValue(cacheKey, value);
+  return value;
 };
 
 export const getImageSource = async (
   imageSourceCache: ReturnType<typeof createIconSourceCache>,
   fontReference: string,
   glyph: string,
-  size = DEFAULT_ICON_SIZE,
-  color: TextStyle['color'] = DEFAULT_ICON_COLOR,
+  options?: GetImageSourceOptions,
 ) => {
-  const NativeIconAPI = ensureGetImageAvailable();
-
-  const processedColor = processColor(color);
-  const cacheKey = `${glyph}:${size}:${String(processedColor)}`;
-
-  const maybeCachedValue = imageSourceCache.get(cacheKey);
-  if (maybeCachedValue !== undefined) {
-    // FIXME: Should this check if it's an error and throw it again?
-    return maybeCachedValue;
-  }
+  const { cacheKey, cached, nativeOptions } = resolveOptions(imageSourceCache, fontReference, glyph, options);
+  if (cached !== undefined) return cached;
 
-  try {
-    const imagePath = await NativeIconAPI.getImageForFont(
-      fontReference,
-      glyph,
-      size,
-      processedColor as number, // FIXME what if a non existent colour was passed in?
-    );
-    const value = { uri: imagePath, scale: PixelRatio.get() };
-    imageSourceCache.setValue(cacheKey, value);
-    return value;
-  } catch (error) {
-    imageSourceCache.setError(cacheKey, error as Error);
-    throw error;
-  }
+  const value = await ensureGetImageAvailable().getImageForFont(glyph, nativeOptions);
+  imageSourceCache.setValue(cacheKey, value);
+  return value;
 };