| 1 | // Fallback for using MaterialIcons on Android and web.
|
| 2 |
|
| 3 | import MaterialIcons from '@expo/vector-icons/MaterialIcons';
|
| 4 | import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
|
| 5 | import { ComponentProps } from 'react';
|
| 6 | import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
|
| 7 |
|
| 8 | type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
|
| 9 | type IconSymbolName = keyof typeof MAPPING;
|
| 10 |
|
| 11 | /**
|
| 12 | * Add your SF Symbols to Material Icons mappings here.
|
| 13 | * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
|
| 14 | * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
|
| 15 | *
|
| 16 | * TODO: We might get rid of this completely and just wrap a <MeterialIcons>
|
| 17 | * since we won't have iOS stuff
|
| 18 | */
|
| 19 | const MAPPING = {
|
| 20 | 'house.fill': 'home',
|
| 21 | 'notifications': 'notifications',
|
| 22 | 'add-circle': 'add-circle',
|
| 23 | 'history': 'history',
|
| 24 | 'lightbulb-outline': 'lightbulb-outline',
|
| 25 | 'paperplane.fill': 'send',
|
| 26 | 'chevron.left.forwardslash.chevron.right': 'code',
|
| 27 | 'chevron.right': 'chevron-right',
|
| 28 | 'bolt': 'bolt',
|
| 29 | 'settings.fill': 'settings'
|
| 30 | } as IconMapping;
|
| 31 |
|
| 32 | /**
|
| 33 | * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
|
| 34 | * This ensures a consistent look across platforms, and optimal resource usage.
|
| 35 | * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
|
| 36 | */
|
| 37 | export function IconSymbol({
|
| 38 | name,
|
| 39 | size = 24,
|
| 40 | color,
|
| 41 | style,
|
| 42 | }: {
|
| 43 | name: IconSymbolName;
|
| 44 | size?: number;
|
| 45 | color: string | OpaqueColorValue;
|
| 46 | style?: StyleProp<TextStyle>;
|
| 47 | weight?: SymbolWeight;
|
| 48 | }) {
|
| 49 | return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
|
| 50 | }
|