svg into react-native project

Question

Since the last 72 hours, I have lost my mind trying to figure this out.

All I want to do is use my vectors from illustrator and display them on my react-native app.

I tried a few libraries like react-native-vector-icons used icomoon followed steps, no result.

Please guide me a perfect solution to this issue. I have no web developer experience, all I know is Javascript and react-native and illustrator.

// Code

import React, {Component} from "react";
import {View, Text} from "react-native";
import {Font} from "expo";
import {createIconSetFromIcoMoon} from "react-native-vector-icons";
import icoMoonConfig from "../selection.json";
const Icon = createIconSetFromIcoMoon(icoMoonConfig);
Expo.Font.loadAsync("icomoon", require("../assets/fonts/icomoon.ttf"));
export default class INITIATE extends React.Component {

    async componentDidMount() {
        await Font.loadAsync("icomoon",
            require("../assets/fonts/icomoon.ttf"));
        this.setState({fontLoaded: true});
    }

    state = {
        fontLoaded: true
    };

    render() {
        return (
            <View style={{
                flex: 1, justifyContent: "center", alignItems:
                    "center"
            }}>
                {this.state.fontLoaded ? <Icon/> : null}
            </View>
        );
    }
}

// The screen renders blank

Could you provide the code you tried and tell what did not work as planned? — flen, Jan 08 '18 at 02:33
I have pasted the code here after trying again. All i get is a blank screen without my vector — arthas, Jan 09 '18 at 04:44
Just checking... did you pass any props to ``? Like a valid name, size, or color? Each icon in your config file (i.e. selection.json) should have a "properties" object that includes the name that you should use to reference it by. If you don't specify it will return nothing. — swimisbell, Feb 08 '18 at 20:28

T.Liu · Answer 1 · 2018-01-08T01:39:50.080

0

React Native is for Android and iOS apps and React JS is for web development.

In React, import the SVG image first:

import sampleSvg from 'imgPath/sample.svg';

Then load it with:

<img src={sampleSvg} alt="A Sample SVG Image" />

For React Native, there's a similar question with an answer using webView.

Or try react-native-svg-uri

Hope it can help!

edited Jan 08 '18 at 01:39

answered Jan 08 '18 at 01:25

T.Liu

492
1
5
16

I really don't want to use webView. The better way is to export a large dimensional sized vector as PNG from illustrator or XD, this makes it visually non-pixelated when you add your custom height and width and use it as an Image component – arthas Jan 09 '18 at 04:45

score 0 · Answer 2 · answered Feb 19 '22 at 08:57

Using SVG icons with React is pretty simple.

Create an Icon component.

import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
const iconSet = require("./selection.json");

const Icon = (props) => (
  <IcoMoon
    native
    SvgComponent={Svg}
    PathComponent={Path}
    iconSet={iconSet}
    {...props}
  />
);

export default Icon;

Import and use anywhere.

import Icon from "./icon";

<Icon icon="pencil" size={20} color="orange" />;

For more information: react-icomoon

svg into react-native project

2 Answers2