react-native-ensys-camera-x 1.0.7

package/src/icons.tsx

@@ -0,0 +1,788 @@
+/**
+ * Centralized, dependency-free icon system for the camera plugin.
+ *
+ * This module provides a complete icon abstraction that:
+ * - Requires NO external icon libraries (no react-native-vector-icons, @expo/vector-icons, etc.)
+ * - Allows complete customization via a central registry
+ * - Provides built-in defaults using React Native primitives only
+ * - Supports dynamic icon substitution at runtime
+ * - Integrates with the plugin's configuration system
+ *
+ * Usage:
+ * ```tsx
+ * // Use hook in components
+ * const Icon = useIconComponent('close');
+ * <Icon size={24} color="#FFFFFF" />
+ *
+ * // Or get the registry to render any icon
+ * const icons = useIconRegistry();
+ * const CloseIcon = icons.get('close');
+ * ```
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  useEffect,
+  useSyncExternalStore,
+  type ReactNode,
+  type FC,
+} from 'react';
+import { View, Text } from 'react-native';
+import type { ColorValue, TextStyle } from 'react-native';
+
+// ============================================================================
+// Centralized icon defaults (single source of truth)
+// ============================================================================
+
+/** Default edge length (dp) for icons when a caller omits `size`. */
+export const DEFAULT_ICON_SIZE = 24;
+
+/** Default color for icons when a caller omits `color`. */
+export const DEFAULT_ICON_COLOR = '#000000';
+
+/** Default stroke width (dp) for outline-style icons. */
+export const DEFAULT_ICON_STROKE_WIDTH = 2;
+
+/** Color rendered by the fallback icon when a registry entry is missing. */
+export const DEFAULT_FALLBACK_ICON_COLOR = '#999';
+
+/** Font weight used by the fallback icon's glyph. */
+export const DEFAULT_FALLBACK_ICON_WEIGHT: TextStyle['fontWeight'] = 'bold';
+
+/**
+ * Props that every icon component must accept.
+ * All icons receive at least these standardized props for consistency.
+ */
+export interface IconProps {
+  /** Size in dp (icons are square by default) */
+  size?: number;
+  /** Icon color (CSS color string or React Native color) */
+  color?: ColorValue;
+  /** Optional stroke width for outline-style icons */
+  strokeWidth?: number;
+  /** Optional additional styling */
+  style?: any;
+  /** Optional animation progress for morphing icons like PlusCloseIcon (0 = +, 1 = ×) */
+  progress?: any;
+  /** Direction for directional icons like seek skip rings ('back' | 'forward') */
+  direction?: 'back' | 'forward';
+  /** Optional label string for icons that display text (e.g. seek delta '10') */
+  label?: string;
+  [key: string]: any;
+}
+
+/**
+ * A React component that renders an icon.
+ * Must accept IconProps and render a visual icon representation.
+ */
+export type IconComponent = FC<IconProps>;
+
+/**
+ * All icon keys used throughout the plugin.
+ * Each key maps to one icon that can be customized or replaced.
+ */
+export type CameraIconKey =
+  // Common controls
+  | 'close'
+  | 'back'
+  | 'done'
+  | 'cancel'
+  // Camera controls
+  | 'camera'
+  | 'video'
+  | 'photo'
+  | 'flip'
+  | 'flash_on'
+  | 'flash_off'
+  | 'flash_auto'
+  | 'gallery'
+  | 'photo_mode'
+  | 'video_mode'
+  // Editor tools
+  | 'crop'
+  | 'rotate'
+  | 'filter'
+  | 'sticker'
+  | 'emoji'
+  | 'text'
+  | 'draw'
+  | 'undo'
+  | 'redo'
+  | 'delete'
+  | 'trash'
+  // Media & playback
+  | 'play'
+  | 'pause'
+  | 'stop'
+  | 'download'
+  | 'share'
+  | 'send'
+  | 'more'
+  // Document & audio
+  | 'document'
+  | 'audio'
+  // States & indicators
+  | 'lock'
+  | 'lock_open'
+  | 'chevron_up'
+  | 'chevron_right'
+  | 'check'
+  | 'volume_on'
+  | 'volume_off'
+  | 'mute'
+  | 'warning'
+  // Media operations
+  | 'trim'
+  | 'cover'
+  | 'compress'
+  | 'export'
+  | 'upload'
+  // Recording & audio
+  | 'mic'
+  | 'record'
+  | 'browse_audio'
+  | 'image_video'
+  // Additional
+  | 'plus'
+  | 'minus'
+  // Interactive & inline icons
+  | 'plus_close'
+  | 'circular_seek'
+  | 'view_details'
+  | 'info';
+
+/**
+ * Registry mapping icon keys to React components.
+ * Immutable; use setIconRegistry() to replace the entire registry or
+ * use overrides in the plugin configuration for targeted changes.
+ */
+export type IconRegistry = Map<CameraIconKey, IconComponent>;
+
+/**
+ * Per-icon customization options.
+ * Allows apps to override specific icons or apply global tint colors.
+ */
+export interface IconOverride {
+  /** Custom component to use instead of the default */
+  component?: IconComponent;
+  /** Tint color applied to built-in icons (not custom components) */
+  tintColor?: string;
+  /** Default size for this icon (can be overridden at render time) */
+  size?: number;
+}
+
+/**
+ * Icon registry configuration for the React-component icon system.
+ *
+ * NOTE: distinct from the NATIVE `CameraIconConfig` in `src/types.ts`, which
+ * configures the native camera Activity's Android vector drawables (tint / size
+ * / `resourceName`). This type configures the RN-side registry of React
+ * components. They are two independent layers — see the header docs.
+ */
+export interface CameraIconRegistryConfig {
+  /** Complete custom registry. If provided, replaces the default entirely. */
+  registry?: IconRegistry;
+  /** Per-icon overrides. Merged with the current registry. */
+  overrides?: Partial<Record<CameraIconKey, IconOverride>>;
+  /** Global tint color applied to all built-in icons */
+  tintColor?: string;
+  /** Default size for all icons */
+  defaultSize?: number;
+  /** Default color for icons when a call site omits `color`. */
+  defaultColor?: string;
+  /** Default stroke width (dp) for outline-style icons. */
+  defaultStrokeWidth?: number;
+}
+
+/** Internal: effective icon configuration after merging */
+interface ResolvedIconConfig {
+  registry: IconRegistry;
+  overrides: Partial<Record<CameraIconKey, IconOverride>>;
+  tintColor?: string;
+  defaultSize: number;
+  defaultColor?: string;
+  defaultStrokeWidth?: number;
+}
+
+export type { ResolvedIconConfig };
+
+// ============================================================================
+// Global registry store
+// ============================================================================
+
+/**
+ * Process-wide icon configuration, set from the centralized icon config
+ * (`setCameraIcons()` in `src/config.ts`).
+ *
+ * This exists so a host app can customize icons with ONE call at startup and
+ * have it reach every render path — including `<RenderIcon />` used without a
+ * `CameraIconProvider`, and `<CameraIconProvider>` mounted with no `config`
+ * prop. Provider-supplied config still layers on top; see
+ * {@link resolveIconConfigOverGlobal}.
+ *
+ * Kept here rather than in `iconConfig.tsx` to keep the import graph
+ * one-directional: `config.ts` → `iconConfig.tsx` → `icons.tsx`.
+ */
+let globalResolvedIconConfig: ResolvedIconConfig = resolveIconConfig();
+
+const globalIconConfigListeners = new Set<() => void>();
+
+/**
+ * Replace the process-wide icon configuration and notify every subscriber.
+ * Passing `undefined` restores the shipped defaults.
+ */
+export function setGlobalIconRegistryConfig(
+  config?: CameraIconRegistryConfig
+): void {
+  globalResolvedIconConfig = resolveIconConfig(config);
+  globalIconConfigListeners.forEach((listener) => listener());
+}
+
+/**
+ * The current process-wide resolved icon configuration. Reference-stable
+ * between {@link setGlobalIconRegistryConfig} calls, so it is safe to use as a
+ * `useSyncExternalStore` snapshot.
+ */
+export function getGlobalIconRegistryConfig(): ResolvedIconConfig {
+  return globalResolvedIconConfig;
+}
+
+/** Subscribe to process-wide icon configuration changes. */
+export function subscribeToGlobalIconRegistryConfig(
+  listener: () => void
+): () => void {
+  globalIconConfigListeners.add(listener);
+  return () => {
+    globalIconConfigListeners.delete(listener);
+  };
+}
+
+/**
+ * Resolve a config with the global configuration as its base, so both compose:
+ * a provider's own registry/tint/size wins where it is set, and the centralized
+ * per-icon `overrides` — the artwork a host asked for by name — survive
+ * underneath it. Per-icon overrides merge key-wise with the provider's winning,
+ * since a locally-scoped provider is the more specific instruction.
+ */
+function resolveIconConfigOverGlobal(
+  config: CameraIconRegistryConfig | undefined,
+  base: ResolvedIconConfig
+): ResolvedIconConfig {
+  if (!config) {
+    return base;
+  }
+  return {
+    registry: config.registry ?? base.registry,
+    overrides: { ...base.overrides, ...(config.overrides ?? {}) },
+    tintColor: config.tintColor ?? base.tintColor,
+    defaultSize: config.defaultSize ?? base.defaultSize,
+    defaultColor: config.defaultColor ?? base.defaultColor,
+    defaultStrokeWidth: config.defaultStrokeWidth ?? base.defaultStrokeWidth,
+  };
+}
+
+// ============================================================================
+// Context & Provider
+// ============================================================================
+
+type CameraIconContextValue = {
+  config: ResolvedIconConfig;
+  updateConfig: (config: CameraIconRegistryConfig) => void;
+  getComponent: (key: CameraIconKey) => IconComponent | undefined;
+};
+
+const CameraIconContext = createContext<CameraIconContextValue | null>(null);
+
+export interface CameraIconProviderProps {
+  children: ReactNode;
+  config?: CameraIconRegistryConfig;
+}
+
+/**
+ * Provider component that manages the icon registry and configuration.
+ * Wrap your app with this to customize icons throughout the plugin.
+ *
+ * ```tsx
+ * <CameraIconProvider config={{ tintColor: '#FF0000' }}>
+ *   <App />
+ * </CameraIconProvider>
+ * ```
+ */
+export const CameraIconProvider: FC<CameraIconProviderProps> = ({
+  children,
+  config: initialConfig,
+}) => {
+  // The centralized configuration is the base layer; this provider's own
+  // `config` prop layers over it.
+  const globalConfig = useSyncExternalStore(
+    subscribeToGlobalIconRegistryConfig,
+    getGlobalIconRegistryConfig,
+    getGlobalIconRegistryConfig
+  );
+
+  const [localConfig, setLocalConfig] = useState<
+    CameraIconRegistryConfig | undefined
+  >(initialConfig);
+
+  // Keep the local config in sync when the `config` prop changes after mount.
+  // Without this, updates to the provider's config prop would be ignored (the
+  // useState initializer only runs once).
+  useEffect(() => {
+    setLocalConfig(initialConfig);
+  }, [initialConfig]);
+
+  const resolvedConfig = useMemo(
+    () => resolveIconConfigOverGlobal(localConfig, globalConfig),
+    [localConfig, globalConfig]
+  );
+
+  const handleUpdateConfig = (config: CameraIconRegistryConfig) => {
+    setLocalConfig(config);
+  };
+
+  const getComponent = (key: CameraIconKey): IconComponent | undefined => {
+    const override = resolvedConfig.overrides[key];
+    if (override?.component) {
+      return override.component;
+    }
+    return resolvedConfig.registry.get(key);
+  };
+
+  const value: CameraIconContextValue = useMemo(
+    () => ({
+      config: resolvedConfig,
+      updateConfig: handleUpdateConfig,
+      getComponent,
+    }),
+    [resolvedConfig]
+  );
+
+  return (
+    <CameraIconContext.Provider value={value}>
+      {children}
+    </CameraIconContext.Provider>
+  );
+};
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+/**
+ * The effective config for the calling component: the nearest
+ * `CameraIconProvider`'s config when one is mounted, otherwise the centralized
+ * configuration set by `setCameraIcons()` (or the shipped defaults).
+ *
+ * Every hook below funnels through this so icons resolve identically with or
+ * without a provider, and so a `setCameraIcons()` call re-renders subscribers.
+ */
+function useEffectiveIconConfig(): ResolvedIconConfig {
+  const context = useContext(CameraIconContext);
+  const globalConfig = useSyncExternalStore(
+    subscribeToGlobalIconRegistryConfig,
+    getGlobalIconRegistryConfig,
+    getGlobalIconRegistryConfig
+  );
+  return context?.config ?? globalConfig;
+}
+
+function componentFor(
+  config: ResolvedIconConfig,
+  key: CameraIconKey
+): IconComponent | undefined {
+  return config.overrides[key]?.component ?? config.registry.get(key);
+}
+
+/**
+ * Get the current icon configuration and registry.
+ * Use this to access the raw registry or override configuration.
+ */
+export function useIconRegistry(): IconRegistry {
+  return useEffectiveIconConfig().registry;
+}
+
+/**
+ * Get a single icon component by key.
+ * Returns the component directly, or a fallback if not found.
+ *
+ * ```tsx
+ * const Icon = useIcon('close');
+ * return <Icon size={24} color="#FFF" />;
+ * ```
+ */
+export function useIcon(key: CameraIconKey): IconComponent {
+  const config = useEffectiveIconConfig();
+  const component = componentFor(config, key);
+  if (!component) {
+    console.warn(`Icon "${key}" not found in registry, using fallback`);
+    return DefaultFallbackIcon;
+  }
+
+  return component;
+}
+
+/**
+ * Get a rendered icon component with preset props.
+ * This is the most convenient way to render icons in most cases.
+ *
+ * ```tsx
+ * return <RenderIcon name="close" size={24} color="#FFF" />;
+ * ```
+ */
+export function useRenderIcon(): (
+  name: CameraIconKey,
+  props?: IconProps
+) => React.ReactElement {
+  const config = useEffectiveIconConfig();
+
+  return (name: CameraIconKey, props?: IconProps) => {
+    const Component = componentFor(config, name);
+    if (!Component) {
+      console.warn(`Icon "${name}" not found in registry`);
+      return <DefaultFallbackIcon {...props} />;
+    }
+
+    // Apply config defaults and overrides
+    const override = config.overrides[name];
+    const finalSize = props?.size ?? override?.size ?? config.defaultSize;
+    const finalColor =
+      props?.color ??
+      override?.tintColor ??
+      config.tintColor ??
+      config.defaultColor ??
+      DEFAULT_ICON_COLOR;
+    const finalStrokeWidth =
+      props?.strokeWidth ??
+      config.defaultStrokeWidth ??
+      DEFAULT_ICON_STROKE_WIDTH;
+
+    return (
+      <Component
+        {...props}
+        size={finalSize}
+        color={finalColor}
+        strokeWidth={finalStrokeWidth}
+      />
+    );
+  };
+}
+
+/**
+ * Get the current icon registry configuration as a hook.
+ * Useful for accessing tint colors, default sizes, and overrides.
+ */
+export function useIconConfig(): ResolvedIconConfig {
+  return useEffectiveIconConfig();
+}
+
+/**
+ * Standalone icon component that reads from the icon registry.
+ * Works both inside and outside CameraIconProvider — with no provider it reads
+ * the centralized configuration set by `setCameraIcons()`, falling back to the
+ * built-in default icons.
+ *
+ * ```tsx
+ * <RenderIcon name="close" size={24} color="#FFF" />
+ * ```
+ */
+export const RenderIcon: FC<IconProps & { name: CameraIconKey }> = ({ name, ...props }) => {
+  const context = useContext(CameraIconContext);
+  // Subscribed unconditionally so the hook order stays stable whether or not a
+  // provider is mounted above this icon.
+  const globalConfig = useSyncExternalStore(
+    subscribeToGlobalIconRegistryConfig,
+    getGlobalIconRegistryConfig,
+    getGlobalIconRegistryConfig
+  );
+
+  let Component: IconComponent | undefined;
+  let resolved: ResolvedIconConfig;
+
+  if (context) {
+    resolved = context.config;
+    Component = context.getComponent(name);
+  } else {
+    // No provider — read the centralized config (defaults when unset).
+    resolved = globalConfig;
+    Component = resolved.overrides[name]?.component ?? resolved.registry.get(name);
+  }
+
+  if (!Component) {
+    return <DefaultFallbackIcon {...props} />;
+  }
+
+  // Merge config defaults + overrides; explicit props always win.
+  const override = resolved.overrides[name];
+  const finalSize = props.size ?? override?.size ?? resolved.defaultSize;
+  const finalColor =
+    props.color ??
+    override?.tintColor ??
+    resolved.tintColor ??
+    resolved.defaultColor ??
+    DEFAULT_ICON_COLOR;
+  const finalStrokeWidth =
+    props.strokeWidth ?? resolved.defaultStrokeWidth ?? DEFAULT_ICON_STROKE_WIDTH;
+
+  return (
+    <Component
+      {...props}
+      size={finalSize}
+      color={finalColor}
+      strokeWidth={finalStrokeWidth}
+    />
+  );
+};
+
+/**
+ * Get an icon component by key without requiring a React context.
+ * Reads the centralized configuration set by `setCameraIcons()` and falls back
+ * to the built-in default icons.
+ * Useful in non-component code or when the provider is not available.
+ */
+export function getIconComponent(key: CameraIconKey): IconComponent {
+  const resolved = getGlobalIconRegistryConfig();
+  return (
+    resolved.overrides[key]?.component ??
+    resolved.registry.get(key) ??
+    DefaultFallbackIcon
+  );
+}
+
+// ============================================================================
+// Configuration Management
+// ============================================================================
+
+/**
+ * Create or update the global icon configuration.
+ * This is called by the plugin's main configure() function.
+ */
+export function resolveIconConfig(
+  config?: CameraIconRegistryConfig
+): ResolvedIconConfig {
+  return {
+    registry: config?.registry ?? createDefaultIconRegistry(),
+    overrides: config?.overrides ?? {},
+    tintColor: config?.tintColor,
+    defaultSize: config?.defaultSize ?? DEFAULT_ICON_SIZE,
+    defaultColor: config?.defaultColor ?? DEFAULT_ICON_COLOR,
+    defaultStrokeWidth:
+      config?.defaultStrokeWidth ?? DEFAULT_ICON_STROKE_WIDTH,
+  };
+}
+
+/**
+ * Merge icon configurations together.
+ * Used by the plugin's configuration system to compose icon customizations.
+ */
+export function mergeIconConfigs(
+  base: CameraIconRegistryConfig,
+  override?: Partial<CameraIconRegistryConfig>
+): CameraIconRegistryConfig {
+  if (!override) {
+    return base;
+  }
+
+  return {
+    registry: override.registry ?? base.registry,
+    tintColor: override.tintColor ?? base.tintColor,
+    defaultSize: override.defaultSize ?? base.defaultSize,
+    defaultColor: override.defaultColor ?? base.defaultColor,
+    defaultStrokeWidth:
+      override.defaultStrokeWidth ?? base.defaultStrokeWidth,
+    overrides: {
+      ...(base.overrides ?? {}),
+      ...(override.overrides ?? {}),
+    },
+  };
+}
+
+// ============================================================================
+// Default Icon Registry
+// ============================================================================
+
+/**
+ * Create the default icon registry with built-in icons.
+ * These are defined in defaultIcons.tsx and require no external dependencies.
+ *
+ * Returns a FRESH Map on every call so a consumer that mutates the returned
+ * registry cannot corrupt the defaults process-wide.
+ */
+export function createDefaultIconRegistry(): IconRegistry {
+  // Lazy-import defaults to avoid circular dependencies
+  // Actual default icons are defined in defaultIcons.tsx
+  const {
+    CloseIcon,
+    BackIcon,
+    DoneIcon,
+    CancelIcon,
+    CameraIcon,
+    VideoIcon,
+    PhotoIcon,
+    PhotoModeIcon,
+    VideoModeIcon,
+    FlipIcon,
+    FlashOnIcon,
+    FlashOffIcon,
+    FlashAutoIcon,
+    GalleryIcon,
+    CropIcon,
+    RotateIcon,
+    FilterIcon,
+    StickerIcon,
+    EmojiIcon,
+    TextIcon,
+    DrawIcon,
+    UndoIcon,
+    RedoIcon,
+    DeleteIcon,
+    PlayIcon,
+    PauseIcon,
+    StopIcon,
+    DownloadIcon,
+    ShareIcon,
+    SendIcon,
+    MoreIcon,
+    DocumentIcon,
+    AudioIcon,
+    LockIcon,
+    LockOpenIcon,
+    ChevronUpIcon,
+    ChevronRightIcon,
+    CheckIcon,
+    VolumeOnIcon,
+    VolumeOffIcon,
+    MuteIcon,
+    WarningIcon,
+    TrimIcon,
+    CoverIcon,
+    CompressIcon,
+    ExportIcon,
+    UploadIcon,
+    MicIcon,
+    RecordIcon,
+    BrowseAudioIcon,
+    ImageVideoIcon,
+    PlusIcon,
+    MinusIcon,
+    PlusCloseIcon,
+    CircularSeekIcon,
+    ViewDetailsIcon,
+    InfoIcon,
+  } = require('./defaultIcons');
+
+  const registry = new Map<CameraIconKey, IconComponent>([
+    ['close', CloseIcon],
+    ['back', BackIcon],
+    ['done', DoneIcon],
+    ['cancel', CancelIcon],
+    ['camera', CameraIcon],
+    ['video', VideoIcon],
+    ['photo', PhotoIcon],
+    ['photo_mode', PhotoModeIcon],
+    ['video_mode', VideoModeIcon],
+    ['flip', FlipIcon],
+    ['flash_on', FlashOnIcon],
+    ['flash_off', FlashOffIcon],
+    ['flash_auto', FlashAutoIcon],
+    ['gallery', GalleryIcon],
+    ['crop', CropIcon],
+    ['rotate', RotateIcon],
+    ['filter', FilterIcon],
+    ['sticker', StickerIcon],
+    ['emoji', EmojiIcon],
+    ['text', TextIcon],
+    ['draw', DrawIcon],
+    ['undo', UndoIcon],
+    ['redo', RedoIcon],
+    ['delete', DeleteIcon],
+    ['trash', DeleteIcon],
+    ['play', PlayIcon],
+    ['pause', PauseIcon],
+    ['stop', StopIcon],
+    ['download', DownloadIcon],
+    ['share', ShareIcon],
+    ['send', SendIcon],
+    ['more', MoreIcon],
+    ['document', DocumentIcon],
+    ['audio', AudioIcon],
+    ['lock', LockIcon],
+    ['lock_open', LockOpenIcon],
+    ['chevron_up', ChevronUpIcon],
+    ['chevron_right', ChevronRightIcon],
+    ['check', CheckIcon],
+    ['volume_on', VolumeOnIcon],
+    ['volume_off', VolumeOffIcon],
+    ['mute', MuteIcon],
+    ['warning', WarningIcon],
+    ['trim', TrimIcon],
+    ['cover', CoverIcon],
+    ['compress', CompressIcon],
+    ['export', ExportIcon],
+    ['upload', UploadIcon],
+    ['mic', MicIcon],
+    ['record', RecordIcon],
+    ['browse_audio', BrowseAudioIcon],
+    ['image_video', ImageVideoIcon],
+    ['plus', PlusIcon],
+    ['minus', MinusIcon],
+    ['plus_close', PlusCloseIcon],
+    ['circular_seek', CircularSeekIcon],
+    ['view_details', ViewDetailsIcon],
+    ['info', InfoIcon ?? ViewDetailsIcon],
+  ]);
+
+  return registry;
+}
+
+// ============================================================================
+// Fallback Icon
+// ============================================================================
+
+/**
+ * Simple fallback icon for missing icons.
+ * Just renders a simple circle to indicate an icon should be here.
+ */
+const DefaultFallbackIcon: IconComponent = ({
+  size = DEFAULT_ICON_SIZE,
+  color = DEFAULT_FALLBACK_ICON_COLOR,
+  strokeWidth = DEFAULT_ICON_STROKE_WIDTH,
+}) => {
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: strokeWidth,
+        borderColor: color as string,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text
+        style={{
+          fontSize: size * 0.5,
+          color: color as string,
+          fontWeight: DEFAULT_FALLBACK_ICON_WEIGHT,
+        }}
+      >
+        ?
+      </Text>
+    </View>
+  );
+};
+
+export { DefaultFallbackIcon };
+
+// ============================================================================
+// Export Default Configuration
+// ============================================================================
+
+export const DEFAULT_ICON_REGISTRY_CONFIG: CameraIconRegistryConfig = {
+  registry: createDefaultIconRegistry(),
+  overrides: {},
+  defaultSize: 24,
+};