53 lines
1.5 KiB
TypeScript
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
|