CODEWITHSUNDEEP
react-nativeiconsreact-native-elementsreact-native-paper
Patrissol Kenfack
Patrissol Kenfack

Reputation: 863

How to get an Icon Component in react-native-paper without Button Component like in react-native-elements

I'm using react-native-paper and I want to get an Icon component but without any link with Button Component. I went through the doc and I didn't found an Icon Component. I want something similar than react-native-elements one

import { Icon } from 'react-native-elements'


<Icon
  name='g-translate'
  color='#00aced' />

So please help me to achieve this.

Upvotes: 5

Views: 8376

Answers (3)

Jeffrey
Jeffrey

Reputation: 79

An alternative approach would be to directly import the Icon component from the source directory of react-native-paper:

import { View } from 'react-native'
import { Text } from 'react-native-paper'
import Icon from 'react-native-paper/src/components/Icon'

function Price() {
  return (
    <View>
      <Text>&euro; 2,100.58</Text>
      <Icon source="arrow-right" size={15} />
    </View>
  )
}

Edit: With the latest version you can also directly import the Icon component.

import { Icon } from 'react-native-paper'

Upvotes: 4

Syed Rahaman
Syed Rahaman

Reputation: 21

You can use Avtar.Icon. By default, it has some margin around the icon. You can create your own component by modifying the Avtar.Icon. Here is an example:

    const iconSize = 34
    const customAvtardimension = 0.6 * iconSize
    <Avatar.Icon
      size={iconSize}
      icon="bell-ring-outline"
      color={Colors.redA700}
      style={{
        backgroundColor: Colors.transparent,
        width: customAvtardimension,
        height: customAvtardimension,
      }}
    />

Upvotes: 2

Minh Nguyen Quang
Minh Nguyen Quang

Reputation: 71

you can use "react-native-vector-icons" library because the icon in react-native-paper is from react-native-vector-icons. here is code:

import Icon from 'react-native-vector-icons/FontAwesome'; const myIcon = <Icon name="rocket" size={30} color="#900" />;

Upvotes: 5

Related Questions