Иконки не загружаются правильно-native-vector-icons

Question

Я использую React-Native для создания приложения. Я пошел на FlatIcon, чтобы получить некоторые пользовательские значки, которые я загрузил в IcoMoon, и следовал инструкциям по установке, чтобы правильно реализовать их на react-native,

Проблема в том, что результат, который я получаю, полностью отличается от того, что я установил.

Это значок, который я получаю в приложении:

Но я должен получить этот результат:

CustomIcon.js

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);

Home.js

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import CustomIcon from '../helpers/CustomIcon';

export default class Home extends React.Component {

  render() {
    return (
      <ScrollView>
        <CustomIcon name="eco-fuel" size={80}  />
      </ScrollView>
    );
  }
}

Как видите, у него нет цвета, а макет совсем другой. Я пробовал с другими иконками, но получил те же результаты.

Answer 1

Я нашел альтернативу получению желаемого результата. Это все еще не решает проблему того, почему react-native-vector-icons не показывает правильное расположение иконок / цвет.

Вместо того, чтобы использовать значки, я скачал .png от IcoMoon, который был 1-2 КБ каждый вместо svg файлы, которые были 3-4 КБ каждый.

Я создал CustomIcon.js

import React from 'react';
import {Image} from 'react-native'

export default CustomIcon = name => {
  switch (name) {
    case 'coal':
      return <Image source={require('../resources/assests/icons/coal.png')} />;
    case 'gas':
      return <Image source={require('../resources/assests/icons/eco-fuel.png')} />;
    case 'imports':
      return <Image source={require('../resources/assests/icons/electric-tower.png')} />;
    case 'hydro':
      return <Image source={require('../resources/assests/icons/hydroelectric-power.png')} />;
    case 'biomass':
      return <Image source={require('../resources/assests/icons/natural-product.png')} />;
    case 'nuclear':
      return <Image source={require('../resources/assests/icons/nuclear-energy.png')} />;
    case 'other':
      return <Image source={require('../../resources/assests/icons/power-plant.png')} />;
    case 'solar':
      return <Image source={require('../resources/assests/icons/solar-energy.png')} />;
    case 'wind':
      return <Image source={require('../resources/assests/icons/wind-energy.png')} />;
    default:
      return 'none';
  }
}

Как видите, это займет некоторое время, если у вас будет намного больше изображений.

получение изображений Home.js

import React, { Component } from 'react';
import {  ScrollView } from 'react-native';
import {ListItem } from 'react-native-elements';
import CustomIcon from '../helpers/CustomIcon';

export default class Home extends Component {
  render() {
        return (
            <ScrollView >
            {myList.map((l, i) => (
                <ListItem
                    leftAvatar={CustomIcon(l.name)} // CustomIcon(name)
                    key={i}
                    title={this.Capitalize(l.name)}
                    bottomDivider
                />
            ))}
            </ScrollView>
        )
    }
}

Вы можете создать компонент Icon и передать его реквизитам, чтобы создать свои собственные иконки. Но так как я использую только avatar это достаточно хорошо, чтобы иметь функцию. Но может быть значительно улучшено.