jonsamp / react-native-expo-svg Goto Github PK
View Code? Open in Web Editor NEWConvert svg files to Expo-friendly Svg components.
react-native-expo-svg's People
Contributors
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Stargazers
Watchers
Forkers
smallfxreact-native-expo-svg's Issues
App crashing
App is crashing whenever the screen containing svg file is opened.App is working fine for the svg given in examples but not for any other svg files.I am trying do display svg from https://undraw.co/illustrations .Kindly provide a solution.
Issues with Gradient
First of all thanks for this tool, it's awesome.
I've created a component that has in it a linear gradient.
I've manually added import { LinearGradient } from 'expo-linear-gradient'because it was not added automatically by the script.
However it gives me this error
Failed prop type: The prop colors is marked as required in LinearGradient, but its value is undefined.
and:
undefined is not an object (evaluating 'colors.map')
This is the code that the tool generates.
This is the svg if you want to make some tests
GreenCheck.svg.zip
import React from 'react';
import { Defs, Line, Path, Stop, Svg } from 'react-native-svg'
import { LinearGradient } from 'expo-linear-gradient';
function GreenCheckIcon() {
return (
<Svg data-name="Group 123" width="146.405" height="146.405" viewBox="0 0 146.405 146.405"><Defs><LinearGradient colors={['lightblue', 'black', 'lightgreen']} id="a" x1=".222" x2="1" y2="1" gradientUnits="objectBoundingBox"><Stop offset="0" stopColor="#01e5af"/><Stop offset="1" stopColor="#00b6fb"/></LinearGradient></Defs><Path data-name="Path 1408" d="M124.964 21.44A73.2 73.2 0 0021.44 124.964 73.2 73.2 0 10124.964 21.44zm-16.789 34.34L67.266 96.69a4.289 4.289 0 01-6.066 0L38.229 73.719a4.289 4.289 0 116.071-6.066l19.934 19.938 37.876-37.876a4.289 4.289 0 016.066 6.066z" fill="url(#a)"/></Svg>
);
}
export default GreenCheckIcon;
Missing cases
These items can be found and should be discarded :
xmlns:
xlink
These items should be converted :
stroke-width -> strokeWidth
stroke-linecap -> strokeLinecap
stroke-linejoin -> strokeLinejoin
If a "filter" directive is used in the SVG file, it is not supported by expo SVG, so it should stop import with a warning (file should be corrupted)
Converted SVG is not working
Source:
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 48 48" xml:space="preserve"><path d="M39 39.079H9a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h30a3 3 0 0 1 3 3v27.079a3 3 0 0 1-3 3z" fill="#FF8F00"/><path d="M39 42H9a3 3 0 0 1-3-3V14a3 3 0 0 1 3-3h30a3 3 0 0 1 3 3v25a3 3 0 0 1-3 3z" fill="#DD2C00"/><circle cx="15" cy="17" r="2" fill="#B71C1C"/><circle cx="33" cy="17" r="2" fill="#B71C1C"/><path d="M33 17c0 4.971-4.029 9-9 9s-9-4.029-9-9" fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10"/><metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rdf:Description about="https://iconscout.com/legal#licenses" dc:title="aliexpress" dc:description="aliexpress" dc:publisher="Iconscout" dc:date="2017-12-15" dc:format="image/svg+xml" dc:language="en"><dc:creator><rdf:Bag><rdf:li>Icons8</rdf:li></rdf:Bag></dc:creator></rdf:Description></rdf:RDF></metadata></svg>
Output
import React from 'react';
import { Circle, Path, Svg } from 'react-native-svg'
function AliexpressIcon() {
return (
<Svg viewBox="0 0 48 48"><Path d="M39 39.079H9a3 3 0 01-3-3V9a3 3 0 013-3h30a3 3 0 013 3v27.079a3 3 0 01-3 3z" fill="#FF8F00"/><Path d="M39 42H9a3 3 0 01-3-3V14a3 3 0 013-3h30a3 3 0 013 3v25a3 3 0 01-3 3z" fill="#DD2C00"/><Circle cx="15" cy="17" r="2" fill="#B71C1C"/><Circle cx="33" cy="17" r="2" fill="#B71C1C"/><Path d="M33 17c0 4.971-4.029 9-9 9s-9-4.029-9-9" fill="none" stroke="#FFF" strokeWidth="2" strokeLinecap="round" strokeMiterlimit="10"/></Svg>
);
}
export default AliexpressIcon;
Demo
https://snack.expo.io/@moshfeu/svg-issue
Thanks!
import { Svg } from "expo" no longer supported since SDK 34
As in the title - the import method import { Svg } from "expo" is no longer supported in the latest Expo SDK (34 at the time of writing).
The new route is import Svg from "react-native-svg", but this creates the following error:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Online converter
It could be very useful to create an online version of that tool so users will not have to install and run it locally.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.