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

Question

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',
  },
});

Answer 1

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',
      },