Open Tadjaur opened 5 months ago
I have a rough draft on a component for this
Maybe something like this?
import React from 'react';
import * as ExpoIcons from '@expo/vector-icons';
import * as TamaguiIcons from '@tamagui/lucide-icons';
export type IconSource = 'expo' | 'tamagui';
export type ExpoIconProvider = keyof typeof ExpoIcons;
export type TamaguiIconName = keyof typeof TamaguiIcons;
export type ExpoIconName = IconProps<'expo', ExpoIconProvider>['name'];
export type IconProps<T extends IconSource, P extends ExpoIconProvider> = T extends 'expo'
? React.ComponentProps<(typeof ExpoIcons)[P]>
: T extends 'tamagui'
? React.ComponentProps<(typeof TamaguiIcons)[keyof typeof TamaguiIcons]>
: never;
export interface Props<T extends IconSource, P extends ExpoIconProvider> {
source?: T;
provider?: P;
name: T extends 'expo' ? IconProps<T, P>['name'] : keyof typeof TamaguiIcons;
size?: number;
color?: string;
[key: string]: any;
}
export const Icon = <
T extends IconSource = 'expo',
P extends ExpoIconProvider = 'MaterialCommunityIcons',
>({
source = 'expo' as T,
provider = 'FontAwesome' as P,
name,
size = 24,
color,
...props
}: Props<T, P>) => {
let IconComponent: React.ComponentType<any> | undefined;
switch (source) {
case 'expo':
IconComponent = ExpoIcons[provider];
break;
case 'tamagui':
IconComponent = TamaguiIcons[name as keyof typeof TamaguiIcons];
break;
default:
console.warn(`Unsupported icon source: ${source}`);
}
if (!IconComponent) {
console.warn(
`Icon '${name}' not found in the specified source '${source}' and provider '${provider}'.`,
);
return null;
}
return <IconComponent name={name} size={size} color={color} {...props} />;
};