4

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.

Patrissol Kenfack
  • 764
  • 1
  • 8
  • 22

3 Answers3

3

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" />;

Minh Nguyen Quang
  • 51
  • 2
  • But I wanted to use react-native-paper because it provides a very good way to set a custom icon than react-native-vector-icons itself – Patrissol Kenfack May 26 '20 at 04:12
  • What do you want to custom? – Minh Nguyen Quang May 26 '20 at 04:34
  • react-native-paper gives the possibility to easily set a custom icon from image. For example ``` ``` But now I want to use Icon without ButtonComponent that's why I'm asking an Icon Component – Patrissol Kenfack May 26 '20 at 05:04
  • 1
    Hi. Sorry i have some busy work. i think you have 2 ways. 1. Use Button without text and disabled props is true. 2. Use IconButton and set disabled props is true. way 2 is easy to use and work i think. Goodluck! – Minh Nguyen Quang May 27 '20 at 04:18
2

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>
  )
}
Jeffrey
  • 59
  • 3
1

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,
      }}
    />
Syed Rahaman
  • 11
  • 2