How to import icons from multiple files in react native vector icons?

Question

If I wanted to use Ionicons and MaterialDesign Icons from react native vector icons in the same file, how should I import it?

import Icon from 'react-native-vector-icons/MaterialIcons';

(and)

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

in the same file

Answer 1

After going through the original source files I found out that the icons was exported like

export default iconSet

So you could just use any arbitrary name to import.

In that case, the final code will look like this:

import MaterialIcon from 'react-native-vector-icons/MaterialIcons;
import Ionicon from 'react-native-vector-icons/Ionicons';

Thank You Fran Rios

Answer 2

1- Create file Icon.js.

import React from 'react';
import Feather from 'react-native-vector-icons/Feather';
import Ionicon from 'react-native-vector-icons/Ionicons';
import ZocialIcon from 'react-native-vector-icons/Zocial';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import Fontisto from 'react-native-vector-icons/Fontisto';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import FAIcon from 'react-native-vector-icons/FontAwesome';
import AntDesign from 'react-native-vector-icons/AntDesign';
import OcticonIcon from 'react-native-vector-icons/Octicons';
import FAIcon5 from 'react-native-vector-icons/FontAwesome5';
import FoundationIcon from 'react-native-vector-icons/Foundation';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SimpleLineIcon from 'react-native-vector-icons/SimpleLineIcons';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';

const getIcon = type => {
  switch (type) {
    case 'fontisto':
      return Fontisto;
    case 'material':
      return MaterialIcon;
    case 'evil':
      return EvilIcon;
    case 'feather':
      return Feather;
    case 'ant':
      return AntDesign;
    case 'simpleLine':
      return SimpleLineIcon;
    case 'zocial':
      return ZocialIcon;
    case 'simpleLine':
      return SimpleLineIcon;
    case 'foundation':
      return FoundationIcon;
    case 'fa5':
      return FAIcon5;
    case 'fa':
      return FAIcon;
    case 'ionicon':
      return Ionicon;
    case 'materialCommunity':
      return MaterialCommunityIcon;
    case 'entypo':
      return EntypoIcon;
    case 'octicon':
      return OcticonIcon;
    default:
      return FAIcon;
  }
};

const Icon = ({
  type,
  ...props
}) => {
  const FontIcon = getIcon(type);

  return <FontIcon { ...props
  }
  />;
};

export default Icon;

2- After Import the Icon file:

import Icon from '../../component/common/Icon';

3- And use like that:

<Icon type ="fontisto" name="player-settings" />,

Answer 3

Had Fiddled with the same idea

There is the workaround I had created for the solution with the simplest Implementation & Usage

---

import React, { memo } from 'react';
import { TextProps } from 'react-native';
import IconEntypo from 'react-native-vector-icons/Entypo';
import IconEvilIcons from 'react-native-vector-icons/EvilIcons';
import IconFeather from 'react-native-vector-icons/Feather';
import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
import IconFontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import IconFoundation from 'react-native-vector-icons/Foundation';
import IconIonicons from 'react-native-vector-icons/Ionicons';
import IconMaterialIcons from 'react-native-vector-icons/MaterialIcons';
import IconMaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import IconOcticons from 'react-native-vector-icons/Octicons';
import IconZocial from 'react-native-vector-icons/Zocial';
import IconSimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
import IconAntDesignIcons from 'react-native-vector-icons/AntDesign';

export const IconSets = {
    Entypo: 'Entypo',
    EvilIcons: 'EvilIcons',
    Feather: 'Feather',
    FontAwesome: 'FontAwesome',
    FontAwesome5: 'FontAwesome5',
    Foundation: 'Foundation',
    Ionicons: 'Ionicons',
    MaterialIcons: 'MaterialIcons',
    MaterialCommunityIcons: 'MaterialCommunityIcons',
    Octicons: 'Octicons',
    Zocial: 'Zocial',
    SimpleLineIcons: 'SimpleLineIcons',
    AntDesign: 'AntDesign',
};

type Props = {
    iconSet: string;
    name: string;
    size: number;
    color: string;
};

const Icons = (props: Props) => {
    const { iconSet, ...otherProps } = props;
    switch (iconSet) {
        case IconSets.Entypo:
            return <IconEntypo {...otherProps} />;
        case IconSets.EvilIcons:
            return <IconEvilIcons {...otherProps} />;
        case IconSets.Feather:
            return <IconFeather {...otherProps} />;
        case IconSets.FontAwesome:
            return <IconFontAwesome {...otherProps} />;
        case IconSets.FontAwesome5:
            return <IconFontAwesome5 {...otherProps} />;
        case IconSets.Foundation:
            return <IconFoundation {...otherProps} />;
        case IconSets.Ionicons:
            return <IconIonicons {...otherProps} />;
        case IconSets.MaterialIcons:
            return <IconMaterialIcons {...otherProps} />;
        case IconSets.MaterialCommunityIcons:
            return <IconMaterialCommunityIcons {...otherProps} />;
        case IconSets.Octicons:
            return <IconOcticons {...otherProps} />;
        case IconSets.Zocial:
            return <IconZocial {...otherProps} />;
        case IconSets.SimpleLineIcons:
            return <IconSimpleLineIcons {...otherProps} />;
        case IconSets.AntDesign:
            return <IconAntDesignIcons {...otherProps} />;
        default:
            return <IconFontAwesome {...otherProps} />;
    }
};

export default memo(Icons);

---

Here's a snippet of Usage:

<Icons iconSet={IconSets.FontAwesome} name={"rocket"}></Icons>

---

Additionally, You can comment out the unused ones for optimizations.

Answer 4

also, you can use it:

// icons.js

import MaterialCommunityIconsI from 'react-native-vector-icons/MaterialCommunityIcons'
import SimpleLineIconsI from 'react-native-vector-icons/SimpleLineIcons'
import MaterialIconsI from 'react-native-vector-icons/MaterialIcons'
import FontAwesomeI from 'react-native-vector-icons/FontAwesome'
import FoundationI from 'react-native-vector-icons/Foundation'
import EvilIconsI from 'react-native-vector-icons/EvilIcons'
import OcticonsI from 'react-native-vector-icons/Octicons'
import IoniconsI from 'react-native-vector-icons/Ionicons'
import FeatherI from 'react-native-vector-icons/Feather'
import EntypoI from 'react-native-vector-icons/Entypo'
import ZocialI from 'react-native-vector-icons/Zocial'
import React from 'react'

export const MaterialCommunityIcons = props => (
    <MaterialCommunityIconsI {...props} />
)
 const SimpleLineIcons = props => <SimpleLineIconsI {...props} />
 const MaterialIcons = props => <MaterialIconsI {...props} />
 const FontAwesome = props => <FontAwesomeI {...props} />
 const Foundation = props => <FoundationI {...props} />
 const EvilIcons = props => <EvilIconsI {...props} />
 const Ionicons = props => <IoniconsI {...props} />
 const Octicons = props => <OcticonsI {...props} />
 const Feather = props => <FeatherI {...props} />
 const Entypo = props => <EntypoI {...props} />
 const Zocial = props => <ZocialI {...props} />

export default  {
    MaterialCommunityIcons,
    SimpleLineIcons,
    SimpleLineIcons,
    MaterialIcons,
    FontAwesome,
    Foundation,
    EvilIcons,
    Ionicons,
    Octicons,
    Feather,
    Entypo,
    Zocial 
}

and you can everytime use it from components:

import Icon  from '../../styles/icons'; 


<Icon.FontAwesome name="user" size={22} style={styles.iconNav} />

Answer 5

You can take advantage of using the name you want on each import due type of exporting on react-native-vector-icons:

import IonIcon from 'react-native-vector-icons/Ionicons'
import MaterialIcon from 'react-native-vector-icons/MaterialIcons'

Then you can user IonIcon and MaterialIcon respectively in your code.