@retray-dev/ui-kit 2.5.2 → 2.7.0

package/src/utils/icons.ts

@@ -0,0 +1,73 @@
+import React from 'react'
+import AntDesign from '@expo/vector-icons/AntDesign'
+import Entypo from '@expo/vector-icons/Entypo'
+import Feather from '@expo/vector-icons/Feather'
+import FontAwesome5 from '@expo/vector-icons/FontAwesome5'
+import MaterialIcons from '@expo/vector-icons/MaterialIcons'
+import Ionicons from '@expo/vector-icons/Ionicons'
+
+export type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons'
+
+export interface IconProps {
+  /** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
+  name: string
+  size: number
+  color: string
+  /** Override the resolved family when the same name exists in multiple families. */
+  family?: IconFamily
+}
+
+type ResolvedFamily = {
+  name: IconFamily
+  component: React.ComponentType<{ name: any; size: number; color: string }>
+  glyphMap: Record<string, number>
+}
+
+// Priority order: highest-priority family listed last so it overwrites lower-priority entries in the cache
+const ICON_FAMILIES: ResolvedFamily[] = [
+  { name: 'Ionicons',      component: Ionicons as any,      glyphMap: (Ionicons as any).glyphMap },
+  { name: 'MaterialIcons', component: MaterialIcons as any, glyphMap: (MaterialIcons as any).glyphMap },
+  { name: 'FontAwesome5',  component: FontAwesome5 as any,  glyphMap: (FontAwesome5 as any).glyphMap },
+  { name: 'Entypo',        component: Entypo as any,        glyphMap: (Entypo as any).glyphMap },
+  { name: 'AntDesign',     component: AntDesign as any,     glyphMap: (AntDesign as any).glyphMap },
+  { name: 'Feather',       component: Feather as any,       glyphMap: (Feather as any).glyphMap },
+]
+
+let resolvedCache: Map<string, ResolvedFamily> | null = null
+
+function buildCache(): Map<string, ResolvedFamily> {
+  const cache = new Map<string, ResolvedFamily>()
+  for (const family of ICON_FAMILIES) {
+    if (!family.glyphMap) continue
+    for (const iconName of Object.keys(family.glyphMap)) {
+      cache.set(iconName, family)
+    }
+  }
+  return cache
+}
+
+function resolveFamily(name: string): ResolvedFamily | null {
+  if (!resolvedCache) {
+    resolvedCache = buildCache()
+  }
+  return resolvedCache.get(name) ?? null
+}
+
+export function Icon({ name, size, color, family }: IconProps): React.ReactElement | null {
+  let resolved: ResolvedFamily | null = null
+
+  if (family) {
+    resolved = ICON_FAMILIES.find((f) => f.name === family) ?? null
+  } else {
+    resolved = resolveFamily(name)
+  }
+
+  if (!resolved) return null
+
+  const Component = resolved.component
+  return React.createElement(Component, { name, size, color })
+}
+
+export function renderIcon(name: string, size: number, color: string): React.ReactElement | null {
+  return React.createElement(Icon, { name, size, color })
+}