React Sketchapp SVG

manifest.json

{
	"compatibleVersion": 3,
	"bundleVersion": 1,
	"commands": [
		{
			"name": "SVG",
			"identifier": "main",
			"script": "./svg.js"
		}
	],
	"menu": {
		"isRoot": true,
		"items": ["main"]
	}
}

package.json

{
	"name": "basic-svg",
	"version": "1.0.0",
	"description": "",
	"skpm": {
		"main": "basic-svg.sketchplugin",
		"manifest": "src/manifest.json"
	},
	"scripts": {
		"build": "skpm-build",
		"watch": "skpm-build --watch",
		"render": "skpm-build --watch --run",
		"render:once": "skpm-build --run",
		"postinstall": "npm run build && skpm-link"
	},
	"author": "Jon Gold <[email protected]>",
	"license": "MIT",
	"devDependencies": {
		"@skpm/builder": "^0.4.0"
	},
	"dependencies": {
		"prop-types": "^15.5.8",
		"react": "^16.3.2",
		"d3": "5.7.0",
		"react-sketchapp": "^2.0.0",
		"react-test-renderer": "^16.3.2"
	}
}

svg.js

import * as React from 'react'
import { render, Artboard, Svg } from 'react-sketchapp'

const SketchLogo = () => (
	<Svg xmlns="http://www.w3.org/2000/svg" width="494" height="447" viewBox="0 0 494 447">
		<Svg.G fill="none" fillRule="evenodd">
			<Svg.Path fill="#FFAE00" d="M447 447L0 160 107 15 247 0l140 15 107 145" />
			<Svg.Path fill="#EC6C00" d="M247 447L0 160h494" />
			<Svg.Path fill="#FFAE00" d="M247 447L100 160h294" />
			<Svg.Path fill="#FFEFB4" d="M247 0L100 160h294" />
			<Svg.Path fill="#FFAE00" d="M107 15L52 88 0 160h101M387 15l55 73 52 72H393" />
			<Svg.Path fill="#FED305" d="M107 15l-7 145L247 0m140 15l7 145L247 0" />
		</Svg.G>
	</Svg>
)

const ReactLogo = () => (
	<Svg width={44} height={44}>
		<Svg.G fill="none" fillRule="evenodd" transform="translate(1 -3)">
			<Svg.Circle cx={22} cy={24} r={4.1} fill="#61DAFB" />
			<Svg.G stroke="#61DAFB" strokeWidth={2}>
				<Svg.Ellipse cx={22} cy={24} rx={22} ry={8.4} />
				<Svg.Ellipse cx={22} cy={24} rx={22} ry={8.4} transform="rotate(60 22 24)" />
				<Svg.Ellipse cx={22} cy={24} rx={22} ry={8.4} transform="rotate(120 22 24)" />
			</Svg.G>
		</Svg.G>
	</Svg>
)

const Document = () => (
	<Artboard
		name="Chart"
		style={{
			width: width,
			height: height
		}}
	>
		<SketchLogo />
	</Artboard>
)

export default () => {
	render(<Document />, context.document.currentPage())
}