【问题标题】: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';

在同一个文件中

【问题讨论】:

    标签: javascript react-native ecmascript-6


    【解决方案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" />,
      

      【讨论】:

        猜你喜欢
        • 2023-03-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-01-28
        • 1970-01-01
        • 2020-07-08
        相关资源
        最近更新 更多