Implement SVG tree renderer

[macintoshhelper]

fixes #154

Ended up carrying on the effort from #182 and working inside react-reconciler , my idea of rendering the markup to a string was a bad idea 😄.

I've escaped some of the typing, will get it done once it's working fully first.

I need to create an svg example too. I've created a basic-svg example.

I would migrate the existing <Svg> component to an <SvgXml> component (same API as react-native-svg), and have <Svg> as an <Svg><Svg.*> component only, with no xml string input. Any thoughts on this?

If happy with this, I can work on a migration strategy for this (remove the <Svg source="" usage from the docs, and if the source prop is detected, return <SvgXml xml={props.source} to keep the API working, and this backwards compatibility could be dropped for a major version, e.g. 1.0. Else can leave as is 🙂.

Demo

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/react-figma/react-figma/3b84goay8
✅ Preview: https://react-figma-git-304-default-text-color.react-figma.now.sh

[macintoshhelper]

I've got it working and added an example; however, the Yoga layout is broken in <Svg> with <Svg.*> children (works with source prop though), would be great if you could take a look @ilyalesik , I'm not familiar with how the Yoga layout tree works and how to preserve it in the node.

[ilyalesik]

That looks promising. 🙌

I will try to fix the Yoga issue later. Also, re-hydration crashed at basic-svg example.

[macintoshhelper]

That looks promising. 🙌

I will try to fix the Yoga issue later. Also, re-hydration crashed at basic-svg example.

👍 thanks! I think it would be ideal if people could download examples without cloning the repo (as you can with react-sketchapp), maybe this could be added to the example READMEs? Advantage of having the packages pre-installed in the package.json would be that examples are then easily reproducable, but versions may be out of date though, so am happy either way.

Example README:

## Getting Started

Download the example or clone the repo:

```sh
curl https://codeload.github.com/react-figma/react-figma/tar.gz/master | tar -xz --strip=2 react-figma-master/examples/basic-svg
cd basic-svg
``

Install the dependencies:

```sh
npm i react@16 react-figma 
npm i --save-dev webpack webpack-cli
``

[thierryc]

How to help on ?
Any option / direction ?

This feature is so important.

[ilyalesik]

@thierryc
I think this PR has too many conflicts, so development needs to be restarted.
If you are interested, you can try to do PR, and I'll help.
Also, there is a simple workaround.