Skip to content

Instantly share code, notes, and snippets.

@davo

davo/manifest.json

Last active Nov 2, 2018
Embed
What would you like to do?
React Sketchapp SVG
{
"compatibleVersion": 3,
"bundleVersion": 1,
"commands": [
{
"name": "SVG",
"identifier": "main",
"script": "./svg.js"
}
],
"menu": {
"isRoot": true,
"items": ["main"]
}
}
{
"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 <jon.gold@airbnb.com>",
"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"
}
}
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())
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment