如何从多个文件中导入图标以反应原生矢量图标？

Question

如果我想在同一文件中使用Ionicons和MaterialDesign图标来反应原生矢量图标,我应该如何导入它？

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

(和)

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

在同一个文件中

Answer 1

浏览完原始源文件后,我发现图标的输出方式如下

export default iconSet

所以你可以使用任意名称来导入.最终的代码是

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

谢谢Fran Rios

Answer 2

您可以利用在每个导入到期导出类型上使用的名称react-native-vector-icons:

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

然后,您可以在代码中分别使用IonIcon和MaterialIcon.

Answer 3

另外，您可以使用它：

// 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 
}

并且您可以每次从组件中使用它：

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


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