mirror of
https://github.com/kennethnym/aris.git
synced 2026-03-20 00:51:20 +00:00
kenneth
3ebb47c5ab
- Expo SDK 54 / React Native 0.81 with expo-router - Tailscale devcontainer feature for direct device connectivity - Dev proxy for React Native DevTools access over Tailscale - EAS build configuration for development/preview/production - Ona automation for Expo dev server Co-authored-by: Ona <no-reply@ona.com>
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
// 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} />
|
|
}
|