Невозможно отобразить значки SVG в собственном React Native Component

Question

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

import React from 'react';
import { View, Image, StyleSheet, Text } from 'react-native';

export class MoreIcon extends React.Component {
  render() {
    return(
        <View style={styles.topViewStyle}>
            <View style={styles.circleStyle}>
                <Image source={this.props.iconSource} style={styles.iconStyle} />
            </View>
            <Text style={styles.moreIconText}>{this.props.iconText}</Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    topViewStyle: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    moreIconText: {
        fontSize: 12,
        fontWeight: 'bold',
        color: '#fff',
        lineHeight: 1.17,
        height: 14,
    },
    iconStyle: {
        width: 30,
        height: 30,
    },
    circleStyle: {
        width: 58,
        height: 58,
        borderRadius: 50,
        borderColor: 'rgba(255, 255, 255, 0.3)',
        borderWidth: 2,
    }
});

Проблема заключается в том, что, когда я добавляю атрибут источника в компоненте так:

<MoreIcon iconText='Home' iconSource={require('../../assets/icons/dashboard.svg')} />

Ничего не появляется в круге, и это выглядит так:

Что я делаю не так, когда поставляемая мной опора не отображается на вкладке MoreIcon? (путь правильный к вашему сведению)

Answer 1

Вам нужно будет конвертировать SVG-файлы, чтобы они были совместимы с библиотекой act-native-svg . К счастью, в разделе Readme есть несколько замечательных примеров.

Есть также отличный пример на Закусках

После того, как вы их преобразовали, вы сможете import использовать их как обычные константы.

EDIT:

Согласно приведенному ниже комментарию Адама, использование библиотеки react-native-svg-uri теперь кажется более простым подходом к проблеме SVG.