[英]How to import icons from multiple files in react native vector icons?
If I wanted to use Ionicons and MaterialDesign Icons from react native vector icons in the same file, how should I import it?如果我想在同一个文件中使用来自 react native 矢量图标的 Ionicons 和 MaterialDesign Icons,我应该如何导入它?
import Icon from 'react-native-vector-icons/MaterialIcons';
(and) (和)
import Icon from 'react-native-vector-icons/Ionicons';
in the same file在同一个文件中
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.因此,您可以使用任意名称进行导入。 The final code was
最终的代码是
import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; import Ionicon from 'react-native-vector-icons/Ionicons';
Thankyou Fran Rios谢谢弗兰里奥斯
You can take advantage of using the name you want on each import due type of exporting on react-native-vector-icons
:由于在
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.然后你可以在你的代码中分别使用 IonIcon 和 MaterialIcon 。
also, you can use it:此外,您可以使用它:
// icons.js // 图标.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} />
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.此外,您可以将未使用的注释掉以进行优化。
1- Create file Icon.js. 1- 创建文件 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: 2- 导入图标文件后:
import Icon from '../../component/common/Icon';
3- And use like that: 3-并像这样使用:
<Icon type ="fontisto" name="player-settings" />,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.