CODEWITHSUNDEEP
react-native
devedv
devedv

Reputation: 622

Encircle react-native-vector-icons

I want to encircle react-native-vector icons. I have added a border radius in the style but it not helpful for all devices and also with every icon it behaves different. 

    <Icon  name={'ios-grid-outline'} style={{ color: "rgb(170, 207, 202)", 
 borderRadius:10,
  borderWidth: 2,
  borderColor: 'rgb(170, 207, 202)',
}} />

Link to react native vector icons: https://oblador.github.io/react-native-vector-icons/

enter image description here

Upvotes: 4

Views: 10400

Answers (2)

Nikollai Hernandez
Nikollai Hernandez

Reputation: 97

Try adding the overflow:"hidden" option to your style

<Icon  name={'ios-grid-outline'} style={{ 
  color: "rgb(170, 207, 202)", 
  borderRadius:10,
  borderWidth: 2,
  borderColor: 'rgb(170, 207, 202)',
  overflow: "hidden"
}} />

Upvotes: 8

Srdjan Cosic
Srdjan Cosic

Reputation: 324

Try to wrap it inside a View as a container

<View 
    style={{
        width: 10, 
        height: 10, 
        borderRadius: 5, 
        borderWidth: 2, 
        borderColor: 'rgb(170, 207, 202)'
    }}>
    <Icon name={'ios-grid-outline'} style={{...}} />
</View>

Change the width and height to your own preference of course.

Upvotes: 2

Related Questions