entregas_app/components/Icon.tsx

53 lines
1.5 KiB
TypeScript

import type React from "react"
import { View, StyleSheet } from "react-native"
import {
MaterialIcons,
MaterialCommunityIcons,
Ionicons,
FontAwesome,
FontAwesome5,
Feather
} from "@expo/vector-icons"
// Tipos de ícones suportados
type IconType = "material" | "material-community" | "ionicons" | "font-awesome" | "font-awesome5" | "feather"
interface IconProps {
type: IconType
name: string
size?: number
color?: string
style?: any
}
const Icon: React.FC<IconProps> = ({ type, name, size = 24, color = "#000", style }) => {
const renderIcon = () => {
switch (type) {
case "material":
return <MaterialIcons name={name} size={size} color={color} />
case "material-community":
return <MaterialCommunityIcons name={name} size={size} color={color} />
case "ionicons":
return <Ionicons name={name} size={size} color={color} />
case "font-awesome":
return <FontAwesome name={name} size={size} color={color} />
case "font-awesome5":
return <FontAwesome5 name={name} size={size} color={color} />
case "feather":
return <Feather name={name} size={size} color={color} />
default:
return <MaterialIcons name="error" size={size} color="red" />
}
}
return <View style={[styles.container, style]}>{renderIcon()}</View>
}
const styles = StyleSheet.create({
container: {
alignItems: "center",
justifyContent: "center",
},
})
export default Icon