Component instead of function

headwinds commented 7 years ago

I was able to use msvgc to convert a logo.svg into a Logo.js which was cool to see happen.

When I went to use the Logo.js in my react native project using Expo, it complained about attempting to use an [Object, Object] so I played around with the Logo.js file and added the React.Component setup as well as imported react-native-svg and it worked!

So perhaps msvgc could have an option (a flag like -c) to also produce this type of Component (including react-native-svg) as well as the function approach

This is the tweak:

import React from "react";
import Svg,{G, Path} from 'react-native-svg';

class Logo extends React.Component {
    render(){
        return (
        <Svg width={this.props.width || 102} height={this.props.height || 82} viewBox="0 0 102 82">
      <G fill="none" fill-rule="evenodd"><Path d="M71.21 11.257C44.09-6.246 20.354-3.338 0 19.982L23.766 81.66l69.037-11.27 6.66-40.91c8.284 5.354-1.133-.72-28.253-18.223z" fill="#8CD9C8"></Path>
      <Path d="M77.198 25.385c-12.3-2.43-23.247 7.01-10.521 18.364 6.24 5.569 23.084.094 11.438-17.655l-.917-.71z" fill="#F06475"></Path></G></Svg>
    );
    }
}

export default Logo;

lucasbkatayama commented 6 years ago

Could you please give an example about how did you convert the logo.svg into a Logo.js in Terminal? I'am having some difficult to make it work. It giver me this message.

Warn / Unknown option: AGIL.svg

msvgc --folder [pathToFiles], path to directory with .svg files or concrete file

headwinds commented 6 years ago

@lucasbkatayama I feel your pain - I wish I could help you - unfortunately I don't have the complete solution anymore

maximalism2 / msvgc

Component instead of function #8