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