How I can use React Native vector icons from different directory inside same component?-CodePudding

import Icon from 'react-native-vector-icons/Feather';

import Icon from 'react-native-vector-icons/Ionicons';

I want to use icons both from 'react-native-vector-icons/Feather' and 'react-native-vector-icons/Ionicons' inside same component.

But importing two Icon giving Syntax Error.

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     {/* message-circle is from 'react-native-vector-icons/Feather' */}
      Icon name="message-circle" size={20} color='white' />
      {/* md-caret-down is from 'react-native-vector-icons/Ionicons' */}
      {/* Icon name="message-circle" size={20} color='white' /> */}
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});```

CodePudding user response：

Import react native vector icons using (npm i react-native-vector-icons).

Then use the vector icons from different packages into your current component such as View, SafeAreaView , ScrollView ,....etc, as the code below.

You can use any package from vector icons like this method.

import {Ionicons,MaterialCommunityIcons,FontAwesome5} from '@expo/vector-icons';



export default function App() {
  return (
    <SafeAreaView style={styles.container}>
              <Ionicons
                name="information-circle"
                size={24}
                color={"#3280F0"}
                />   
      {/* information-circle is from 'expo/vector-icons/Ionicons' */}
      </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
                 flex: 1,
                 backgroundColor: '#fff',
  },

CodePudding user response：

You can use modules imports of same name by aliasing as follows.

import {Icon as FeatherIcon} from 'react-native-vector-icons/Feather';

import {Icon as Ionicons} from 'react-native-vector-icons/Ionicons';

For more reference you can refer this documentation on medium.com

For as aliasing you have to use unique name. like

import {Something as SomethingNewName} from .....