CODEWITHSUNDEEP
reactjsreact-nativereact-native-vector-iconsfeather
Shakhawat Hossain SHIHAB
Shakhawat Hossain SHIHAB

Reputation: 49

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

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

Upvotes: 0

Views: 2253

Answers (4)

Bala Vigness
Bala Vigness

Reputation: 455

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

Upvotes: 2

AHSAN HAFEEZ
AHSAN HAFEEZ

Reputation: 1

You can use React Native vector icons from a different directory inside the same component like this:

Import names can't match, Just Change the import name:

import React from 'react';
import {StyleSheet, Text, View, StatusBar} from 'react-native';
import {colors} from './src/global/styles';
import {SignInScreen} from './src/screens/authScreens/SignInScreen';
import Icon from 'react-native-vector-icons/AntDesign';
import Visibility from 'react-native-vector-icons/MaterialIcons';
const App = () => {
  return (
    <View style={styles.container}>
      <SignInScreen />
      <Icon name="lock" style={{color: colors.grey3}} size={16} />
      <Visibility
        name="visibility-off"
        style={{color: colors.grey3, marginRight: 10}}
        size={16}
      />
    </View>
  );
};
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Upvotes: 0

AHSAN HAFEEZ
AHSAN HAFEEZ

Reputation: 1

You can use React Native vector icons from a different directory inside the same component like this

Upvotes: 0

Saif Mohmd
Saif Mohmd

Reputation: 339

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

Upvotes: 1

Related Questions