maximalism2 / msvgc Goto Github PK

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;

generateComponents.js:181
filename = filename[0].toUpperCase() + filename.slice(1)
^

TypeError: Cannot read property 'toUpperCase' of undefined
at optimizer.optimize.res (/Users/wind/.nvm/versions/node/v8.1.2/lib/node_modules/msvgc/lib/generateComponents.js:181:31)

Just a suggestion that I think to turn the generated components more similar/compatible with the standard Image component of React Native and HTML CSS.

On file lib/renderMarkup.js just change:

attrs.push({
      name: 'width',
      value: viewBox ? `{props.width || ${viewBox[2]}}` : `{props.width}`
    })
    attrs.push({
      name: 'height',
      value: viewBox ? `{props.height || ${viewBox[3]}}` : `{props.height}`
    })

to

attrs.push({
      name: 'width',
      value: viewBox ? `{props.style && props.style.width || ${viewBox[2]}}` : `{props.style && props.style.width}`
    })
    attrs.push({
      name: 'height',
      value: viewBox ? `{props.style && props.style.height || ${viewBox[3]}}` : `{props.style && props.style.height}`
    })

Hey there, the latest version on npm doesn't include support for --color. Can you update the version and publish?

SVG files with styling information loose this information when converted to RN components.
e.g.

<style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{clip - path:url(#clip-path);}.cls-3{fill:#ffffff;}</style>

Is not applied anywhere.
react-native-svg doesn't support it, so I'd assume, that the styles should be generated as inplace properties of the relevant components (circle, path etc.)

Minor issue: if the filename of the input SVG is not a valid javascript name (e.g. because it contains dashes), the generated js is invalid:

const abc-def-ghi = props => (
...
)