refactor: icomoon and fontello with expo (#1829)

Author: vonovak

packages/common/src/create-icon-set.tsx

@@ -25,7 +25,7 @@ export type IconProps<T> = TextProps & {
   innerRef?: Ref<Text>;
 };
 
-type IconComponent<GM extends Record<string, number>> = React.FC<
+export type IconComponent<GM extends Record<string, number>> = React.FC<
   TextProps & {
     name: keyof GM;
     size?: number;
@@ -150,7 +150,7 @@ export function createIconSet<GM extends Record<string, number>>(
   const WrappedIcon = forwardRef<Text, IconProps<keyof typeof glyphMap>>((props, ref) => (
     <Icon innerRef={ref} {...props} />
   ));
-  WrappedIcon.displayName = 'Icon';
+  WrappedIcon.displayName = `Icon(${postScriptName})`;
 
   const imageSourceCache = createIconSourceCache();
 

packages/common/src/index.ts

@@ -1,4 +1,4 @@
-export type { CreateIconSetOptions, IconProps } from './create-icon-set';
+export type { CreateIconSetOptions, IconComponent, IconProps } from './create-icon-set';
 export { createIconSet } from './create-icon-set';
 export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from './defaults';
 export {

packages/fontello/README.md

@@ -27,7 +27,7 @@ import createIconSet from '@react-native-vector-icons/fontello';
 import fontelloConfig from './config.json';
 const Icon = createIconSet(fontelloConfig);
 
-cont icon = <Icon name="comments" />;
+const icon = <Icon name="comments" />;
 ```
 
 If you want to customise the font postscript name and filename you can pass extra arguments.

packages/fontello/src/index.ts

@@ -3,7 +3,7 @@
  * Usage: <Fontello name="icon-name" size={20} color="#4F8EF7" />
  */
 
-import { createIconSet } from '@react-native-vector-icons/common';
+import { type CreateIconSetOptions, createIconSet, type IconComponent } from '@react-native-vector-icons/common';
 
 type FontelloConfig = {
   name: string;
@@ -20,13 +20,41 @@ type FontelloConfig = {
   }>;
 };
 
-export default function createIconSetFromFontello(config: FontelloConfig, fontFamilyArg?: string, fontFile?: string) {
+type FontelloComponent = IconComponent<Record<string, number>>;
+
+// entries are optional because they can be derived from the config
+type Options = Partial<CreateIconSetOptions>;
+
+export default function createIconSetFromFontello(
+  config: FontelloConfig,
+  postScriptName?: string,
+  fontFileName?: string,
+): FontelloComponent;
+export default function createIconSetFromFontello(config: FontelloConfig, options: Options): FontelloComponent;
+export default function createIconSetFromFontello(
+  config: FontelloConfig,
+  postScriptNameOrOptions?: string | Options,
+  fontFileNameParam?: string,
+): FontelloComponent {
+  const { postScriptName, fontFileName, fontSource, fontStyle } =
+    typeof postScriptNameOrOptions === 'object'
+      ? postScriptNameOrOptions
+      : {
+          postScriptName: postScriptNameOrOptions,
+          fontFileName: fontFileNameParam,
+        };
+
   const glyphMap: Record<string, number> = {};
   config.glyphs.forEach((glyph) => {
     glyphMap[glyph.css] = glyph.code;
   });
 
-  const fontFamily = fontFamilyArg || config.name || 'fontello';
+  const fontFamily = postScriptName || config.name || 'fontello';
 
-  return createIconSet(glyphMap, fontFamily, fontFile || `${fontFamily}.ttf`);
+  return createIconSet(glyphMap, {
+    postScriptName: fontFamily,
+    fontFileName: fontFileName || `${fontFamily}.ttf`,
+    fontSource,
+    fontStyle,
+  });
 }

packages/icomoon/README.md

@@ -27,7 +27,7 @@ import createIconSet from '@react-native-vector-icons/icomoon';
 import icoMoonConfig from './IcoMoon-Free.json';
 const Icon = createIconSet(icoMoonConfig);
 
-cont icon = <Icon name="comments" />;
+const icon = <Icon name="comments" />;
 ```
 
 If you want to customise the font postscript name and filename you can pass extra arguments.

packages/icomoon/src/index.ts

@@ -3,7 +3,7 @@
  * Usage: <Fontello name="icon-name" size={20} color="#4F8EF7" />
  */
 
-import { createIconSet } from '@react-native-vector-icons/common';
+import { type CreateIconSetOptions, createIconSet, type IconComponent } from '@react-native-vector-icons/common';
 
 type IcoMoonIcon = {
   properties: {
@@ -22,15 +22,43 @@ type IcoMoonConfig = {
   };
 };
 
-export default function createIconSetFromIcoMoon(config: IcoMoonConfig, fontFamilyArg?: string, fontFile?: string) {
+type IcoMoonComponent = IconComponent<Record<string, number>>;
+
+// entries are optional because they can be derived from the config
+type Options = Partial<CreateIconSetOptions>;
+
+export default function createIconSetFromIcoMoon(
+  config: IcoMoonConfig,
+  postScriptName?: string,
+  fontFileName?: string,
+): IcoMoonComponent;
+export default function createIconSetFromIcoMoon(config: IcoMoonConfig, options: Options): IcoMoonComponent;
+export default function createIconSetFromIcoMoon(
+  config: IcoMoonConfig,
+  postScriptNameOrOptions?: string | Options,
+  fontFileNameParam?: string,
+): IcoMoonComponent {
+  const { postScriptName, fontFileName, fontSource, fontStyle } =
+    typeof postScriptNameOrOptions === 'object'
+      ? postScriptNameOrOptions
+      : {
+          postScriptName: postScriptNameOrOptions,
+          fontFileName: fontFileNameParam,
+        };
+
   const glyphMap: Record<string, number> = {};
   config.icons.forEach((icon) => {
     icon.properties.name.split(/\s*,\s*/g).forEach((name) => {
       glyphMap[name] = icon.properties.code;
     });
   });
 
-  const fontFamily = fontFamilyArg || config.preferences.fontPref.metadata.fontFamily;
+  const fontFamily = postScriptName || config.preferences.fontPref.metadata.fontFamily;
 
-  return createIconSet(glyphMap, fontFamily, fontFile || `${fontFamily}.ttf`);
+  return createIconSet(glyphMap, {
+    postScriptName: fontFamily,
+    fontFileName: fontFileName || `${fontFamily}.ttf`,
+    fontSource,
+    fontStyle,
+  });
 }