기본 벡터 아이콘에 반응하여 여러 파일에서 아이콘을 가져오는 방법

기본 벡터 아이콘에 반응하여 여러 파일에서 아이콘을 가져오는 방법

동일한 파일에서 반응하는 네이티브 벡터 아이콘에서 Ionicons 및 MaterialDesign 아이콘을 사용하려면 어떻게 가져와야 하는가?

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

(및)

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

같은 줄로

원본 파일을 살펴본 후, 나는 아이콘이 다음과 같이 내보내졌다는 것을 알았다.

export default iconSet

임의의 이름을 사용하여 가져오십시오.

이 경우 최종 코드는 다음과 같다.

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

고맙다 프랑 리오스

내보낼 각 가져오기 기한 유형에 원하는 이름을 사용할 수 있음react-native-vector-icons:

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

그런 다음 코드에 각각 IonIcon과 MaterialIcon을 사용할 수 있다.

또한 다음과 같이 사용할 수 있다.

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

같은 생각을 만지작거렸었다.

가장 간단한 구현 및 사용으로 솔루션을 위해 만든 해결 방법이 있다.

---

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

---

다음은 사용법 조각:

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

---

또한, 최적화하기 위해 사용하지 않는 항목을 주석 처리하십시오.

1- 파일 아이콘.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- Icon 파일을 가져온 후:

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

3- 그리고 다음과 같이 사용한다.

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

참조URL: https://stackoverflow.com/questions/43495510/how-to-import-icons-from-multiple-files-in-react-native-vector-icons