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

reactjs icons react-native-android vector-icons
Kamlesh Tilwani picture Kamlesh Tilwani · Nov 23, 2017 · Viewed 13.3k times · Source

Can I import react-native-vector-icons/font-awesome and react-native-vector-icons/Ionicons on same screen? Basically I want to use both font-awesome and Ionicons icons on same screen for different icons?

Example-
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/font-awesome';
import Icon from 'react-native-vector-icons/Ionicons';

Answer

magneticz picture magneticz · Nov 23, 2017

Yes, you can. Because FontAwesome and Ionicons are exported as defaults, you can import them with any name, like so

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import IonIcon from 'react-native-vector-icons/Ionicons';

and in your render() method use like

<FontAwesomeIcon name="github" size={16} color="red">
<IonIcon name="github" size={16} color="blue">

Related questions

Tab navigator icons in React Navigation

I'm using react-navigation v2 and react native vector icons. I'm trying to add an icon in a react native tab navigator. The icon shows up if its not in the tab navigator. The icon is not showing up in the …

Read More
How to use material community icons with react-native-vector-icons

I am trying to use the store-front icon in material community icons. However I get an error and it doesn't display the icon. This is my code: import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View } from "…

Read More
How can I set the size of icons in Ant Design?

So when I'm using an Icon in Ant Design it is always 14 * 14 px. Is there a way to set the size maual? Things like <Icon width={"20px"} type="setting" /> or <Icon style={{width: '20em'}} type="setting" /&…

Read More