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

user_12458141 0
Viewed 3026

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.

react-native-elements react-native-paper react-native icons
2 Answers

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

user_134432420

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,
      }}
    />
user_165904490
Related