this repo has no description
hailey.at
1// Fallback for using MaterialIcons on Android and web.
2
3import MaterialIcons from '@expo/vector-icons/MaterialIcons';
4import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
5import { ComponentProps } from 'react';
6import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
7
8type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
9type 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 */
16const MAPPING = {
17 'house.fill': 'home',
18 'paperplane.fill': 'send',
19 'chevron.left.forwardslash.chevron.right': 'code',
20 'chevron.right': 'chevron-right',
21} as IconMapping;
22
23/**
24 * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
25 * This ensures a consistent look across platforms, and optimal resource usage.
26 * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
27 */
28export function IconSymbol({
29 name,
30 size = 24,
31 color,
32 style,
33}: {
34 name: IconSymbolName;
35 size?: number;
36 color: string | OpaqueColorValue;
37 style?: StyleProp<TextStyle>;
38 weight?: SymbolWeight;
39}) {
40 return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
41}