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

Posted 2023-02-22

【中文标题】如何在反应原生矢量图标中从多个文件导入图标？

【英文标题】：How to import icons from multiple files in react native vector icons?

【发布时间】：2017-09-15 16:05:09

【问题描述】：

如果我想在同一个文件中使用 React Native 矢量图标中的 Ionicons 和 MaterialDesign 图标，我应该如何导入？

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

（和）

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

在同一个文件中

【参考方案1】：

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

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

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

【讨论】：

这对我不起作用：我在导入行中遇到了意外的令牌错误。有什么想法吗？

从 'react-native-vector-icons/EvilIcons' 导入 EvilIcon；作品

不需要“as”关键字来重命名默认导出。你给它任何你想要的名字。 “as”关键字用于重命名非默认导出，即 import icon as myIcon from...

完全正确，你建议的方式更优雅。

【参考方案2】：

在浏览了原始源文件后，我发现图标是这样导出的

export default iconSet

所以你可以使用任意名称来导入。

在这种情况下，最终代码将如下所示：

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

谢谢你弗兰里奥斯

【讨论】：

你能告诉我这段代码之后如何导入图标吗？

从哪里来？使用这个卡在错误字体中。

为什么您没有将 Fran Rios 的答案标记为正确答案？

【参考方案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 />

【讨论】：

这很好。允许在应用程序中很好地使用组件，也是一个简单的解决方案。

您不需要单独导出 MaterialCommunityIcons。真的很有帮助。

@JasurKurbanov 当然

【参考方案4】：

曾经有过同样的想法

这是我为解决方案创建的解决方法，实现和使用最简单

---

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);

---

这是一个sn-p的用法：

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

---

此外，您可以注释掉未使用的进行优化。

【参考方案5】：

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- 导入图标文件后：

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

3- 像这样使用：

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