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

2 Answers

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

2

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 .....

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy