You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.4 KiB
41 lines
1.4 KiB
// Fallback for using MaterialIcons on Android and web. |
|
|
|
import MaterialIcons from '@expo/vector-icons/MaterialIcons'; |
|
import { SymbolWeight, SymbolViewProps } from 'expo-symbols'; |
|
import { ComponentProps } from 'react'; |
|
import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native'; |
|
|
|
type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>; |
|
type IconSymbolName = keyof typeof MAPPING; |
|
|
|
/** |
|
* Add your SF Symbols to Material Icons mappings here. |
|
* - see Material Icons in the [Icons Directory](https://icons.expo.fyi). |
|
* - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app. |
|
*/ |
|
const MAPPING = { |
|
'house.fill': 'home', |
|
'paperplane.fill': 'send', |
|
'chevron.left.forwardslash.chevron.right': 'code', |
|
'chevron.right': 'chevron-right', |
|
} as IconMapping; |
|
|
|
/** |
|
* An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web. |
|
* This ensures a consistent look across platforms, and optimal resource usage. |
|
* Icon `name`s are based on SF Symbols and require manual mapping to Material Icons. |
|
*/ |
|
export function IconSymbol({ |
|
name, |
|
size = 24, |
|
color, |
|
style, |
|
}: { |
|
name: IconSymbolName; |
|
size?: number; |
|
color: string | OpaqueColorValue; |
|
style?: StyleProp<TextStyle>; |
|
weight?: SymbolWeight; |
|
}) { |
|
return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />; |
|
}
|
|
|