Support For Paths

[AustinMCrane]

Hello, i really like your project.

I am trying to use your project to create components from an svg that has paths in it and your project doesnt seem to support it. is there any plans to?

Here is an example svg and and the component generated.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="375px" height="272px" viewBox="0 0 375 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <title>Chart</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Chart">
            <rect id="Rectangle-3" fill-opacity="0.445482337" fill="#4A4A4A" x="0" y="0" width="375" height="272"></rect>
            <polyline id="Path-2" stroke="#7ED321" points="18.1953125 252.296875 44.2148438 201.636719 73.0820312 208.746094 73.0820312 195.949219 81.5859375 201.636719 81.5859375 195.949219 109.707031 195.949219 128.386719 208.746094 128.386719 190.785156 160.386719 161.742188 160.386719 190.785156 194.953125 148.792969 241.683594 161.742188 270.523438 133.289062 308.078125 148.792969 320.925781 124.667969 326.03125 92.2890625 340.261719 96.9960938 340.261719 118.136719 352.734375 133.289062"></polyline>
            <text id="$254" font-family="HelveticaNeue-UltraLightItalic, Helvetica Neue" font-size="36" font-style="italic" font-weight="200" letter-spacing="0.964285135" fill="#7ED321">
                <tspan x="146.03943" y="94">$254</tspan>
            </text>
        </g>
    </g>
</svg>

Component

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  ScrollView,
  Image
} from 'react-native';



export default class Main extends Component {

  render() {
    return (
      <ScrollView style={{
        flex: 1, alignSelf: 'stretch',
        paddingTop: 20,
        backgroundColor: '#4A4A4A'}}>
        <Text style={styles._254}>$254</Text>
      </ScrollView>
    )
  }

}

const styles = StyleSheet.create({
  _254: {
    backgroundColor: 'transparent',
    fontSize: 36,
    fontWeight: '200',
    color: '#7ED321',
    textAlign: 'center'
  }
})

[chrisachard]

Unfortunately, right now it just tries to convert it to an image (and sometimes it doesn't even do that all that well). I looked at doing path to svg conversion, but it didn't turn out all that well, so I stuck with images. I hope to (in the not too distant future) connect directly into Sketch via a plugin, which may help (at least with the images)

…

On Wed, Mar 21, 2018 at 1:46 PM, Austin Crane ***@***.***> wrote: Hello, i really like your project. I am trying to use your project to create components from an svg that has paths in it and your project doesnt seem to support it. is there any plans to? Here is an example svg and and the component generated. <?xml version="1.0" encoding="UTF-8"?> <svg width="375px" height="272px" viewBox="0 0 375 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --> <title>Chart</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Chart"> <rect id="Rectangle-3" fill-opacity="0.445482337" fill="#4A4A4A" x="0" y="0" width="375" height="272"></rect> <polyline id="Path-2" stroke="#7ED321" points="18.1953125 252.296875 44.2148438 201.636719 73.0820312 208.746094 73.0820312 195.949219 81.5859375 201.636719 81.5859375 195.949219 109.707031 195.949219 128.386719 208.746094 128.386719 190.785156 160.386719 161.742188 160.386719 190.785156 194.953125 148.792969 241.683594 161.742188 270.523438 133.289062 308.078125 148.792969 320.925781 124.667969 326.03125 92.2890625 340.261719 96.9960938 340.261719 118.136719 352.734375 133.289062"></polyline> <text id="$254" font-family="HelveticaNeue-UltraLightItalic, Helvetica Neue" font-size="36" font-style="italic" font-weight="200" letter-spacing="0.964285135" fill="#7ED321"> <tspan x="146.03943" y="94">$254</tspan> </text> </g> </g> </svg> Component import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, TextInput, ScrollView, Image } from 'react-native'; export default class Main extends Component { render() { return ( <ScrollView style={{ flex: 1, alignSelf: 'stretch', paddingTop: 20, backgroundColor: '#4A4A4A'}}> <Text style={styles._254}>$254</Text> </ScrollView> ) } } const styles = StyleSheet.create({ _254: { backgroundColor: 'transparent', fontSize: 36, fontWeight: '200', color: '#7ED321', textAlign: 'center' } }) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#35>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACInbZ-vSpqWFyETZMsD82ktM9VqajNks5tgpHXgaJpZM4S0-c0> .