Parse svg files about react-native-svg HOT 20 CLOSED

You can try to use this one https://transform.now.sh/svg-to-react-native

from react-native-svg.

Hello, i made this library react-native-svg-uri.
You can render SVG Images from an URL or a static file.

from react-native-svg.

I could not find a tool that does this.
Currently i use paintcode to simplify the svg context a bit and then manual labor.
please not that some defaults in svg need explicit values in react-native-svg.

The advantage is f.e. that you can use javascript property values to make the svg more controllable.

from react-native-svg.

I'm wondering if we could simply create a JS tool to do parsing and reformatting of the SVG standard and then set up the proper JSX... Such as the x/y from transform(), etc

from react-native-svg.

Suggestion! This library seems pretty clean for parsing transform... https://github.com/nidu/svg-transform-parser - we could integrate the regular transform into react-native-svg which will bring us one step closer to compatibility with standard SVG format. I still think we have a fairly large issue with RN components being Proper cased, however, not having to re-format my SVG stuff in regards to all of the transform expressions could be a big bonus. Maybe I'll see if I can fire a PR integrating this (with of course backward compatibility), it could add value. Thoughts?

from react-native-svg.

Not an ideal solution (sometimes you don't want to upload SVGs as an icon font), but if anyone else stumbles across this thread and is looking to display a set of SVG icons in React Native, try https://github.com/oblador/react-native-vector-icons

You can upload all your icons as a custom set to IcoMoon, then use them as an icon font in your app.

from react-native-svg.

that looks handy! thanks @matc4

i'm thinking that we could do an integration with react-native directly give that https://github.com/facebook/react-native/tree/master/Libraries/ART ;)

from react-native-svg.

Hi @7ynk3r, i think that ART does not support all features that SVG have.
see this dicussion: #49

from react-native-svg.

@normanrz I just published https://github.com/target/react-native-svg-parser which does what you are looking for

from react-native-svg.

Docs have been updated: https://github.com/react-native-community/react-native-svg#use-with-svg-files
With react-native-svg-transformer you can now do this:

import Logo from "./logo.svg";
const myApp = () => <Logo width={120} height={40} />
export default myApp

from react-native-svg.

At time generating apk file getting Error: The file name must end with .xml or .png

from react-native-svg.

You need to use react-native-svg-transformer, or something like babel-plugin-inline-import to ensure that code is bundled correctly:
https://github.com/react-native-community/react-native-svg#use-with-svg-files

from react-native-svg.

#msand
I have uses react-native-svg, react-native-svg-uri

from react-native-svg.

react-native-svg-uri requires using babel-plugin-inline-import to fix your issue

from react-native-svg.

@msand , Okay I will try , Thanks for quickly updates

from react-native-svg.

react-native-svg-uri requires using babel-plugin-inline-import to fix your issue

I have to npm this babel-plugin-inline-import to fix this issue?

from react-native-svg.

Yes, and configure it: https://github.com/react-native-community/react-native-svg#use-with-svg-files

from react-native-svg.

Okay, After installing react-native-svg-transformer and change some code in metro.config
I getting error :.

from react-native-svg.

can I know about this in MainApplication importing in svg I have commented :

package com.......;

import android.app.Application;
import android.util.Log;

import com.facebook.react.PackageList;
import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
import com.facebook.react.bridge.JavaScriptExecutorFactory;
import com.facebook.react.ReactApplication;
import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
import org.reactnative.camera.RNCameraPackage;
// import com.horcrux.svg.SvgPackage;
import com.BV.LinearGradient.LinearGradientPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@OverRide
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
  // @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  packages.add(new LinearGradientPackage());
  // packages.add(new SvgPackage());
  return packages;
}

@Override
protected String getJSMainModuleName() {
  return "index";
}

};

@OverRide
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@OverRide
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}

from react-native-svg.

Okay, After installing react-native-svg-transformer and change some code in metro.config
I getting error :.

this issues is resolve by ->
change instead of source to svgXmlData, it should in string

const svgImages =<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="512px" height="512px" class="">... </svg>

add svgImages

SvgUri svgXmlData={svgImages} />

from react-native-svg.