mirror of
https://github.com/tooot-app/app
synced 2025-06-05 22:19:13 +02:00
Use svg icons instead of expo ones
Possibility to control `strokeWidth`
This commit is contained in:
45
src/components/Icon.tsx
Normal file
45
src/components/Icon.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import React, { createElement } from 'react'
|
||||
import { StyleProp, View, ViewStyle } from 'react-native'
|
||||
import * as FeatherIcon from 'react-native-feather'
|
||||
|
||||
export interface Props {
|
||||
name: string
|
||||
size: number
|
||||
color: string
|
||||
strokeWidth?: number
|
||||
inline?: boolean // When used in line of text, need to drag it down
|
||||
style?: StyleProp<ViewStyle>
|
||||
}
|
||||
|
||||
const Icon: React.FC<Props> = ({
|
||||
name,
|
||||
size,
|
||||
color,
|
||||
strokeWidth = 2,
|
||||
inline = false,
|
||||
style
|
||||
}) => {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
style,
|
||||
{
|
||||
width: size,
|
||||
height: size,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: inline ? -size * 0.125 : undefined
|
||||
}
|
||||
]}
|
||||
>
|
||||
{createElement(FeatherIcon[name], {
|
||||
width: size,
|
||||
height: size,
|
||||
color,
|
||||
strokeWidth
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default Icon
|
Reference in New Issue
Block a user