Skip to content

Instantly share code, notes, and snippets.

@souporserious
Last active May 29, 2017 00:01
Show Gist options
  • Save souporserious/f6643bd08c9ff6c8666c646e6af5f202 to your computer and use it in GitHub Desktop.
Save souporserious/f6643bd08c9ff6c8666c646e6af5f202 to your computer and use it in GitHub Desktop.
Turn a Sketch file into an SVG JSON file.
const { readdirSync, readFileSync, writeFileSync } = require('fs')
const { resolve } = require('path')
const del = require('del')
const svgson = require('svgson')
const SketchTool = require('sketch-tool')
const IN_PATH = resolve(__dirname, 'icons.sketch')
const OUT_PATH = resolve(__dirname, 'icons.js')
const Sketch = new SketchTool({
file: IN_PATH,
})
const svgsDir = resolve(__dirname, '../.svgs')
Sketch.exportCall('artboards', {
formats: 'svg',
output: svgsDir,
}).then(() => {
const files = readdirSync(svgsDir)
const jsonData = {}
function writeJsonData() {
const module = `export default ${JSON.stringify(jsonData)}`
writeFileSync(OUT_PATH, module)
del(svgsDir)
}
files.forEach((file, index) => {
const contents = readFileSync(`${svgsDir}/${file}`)
svgson(contents, { svgo: true, pretty: true }, svg => {
const node = svg.childs[1]
const key = file.replace('.svg', '')
if (node.name === 'g') {
node.childs.forEach((childNode, index) => {
jsonData[`${key}-${index}`] = childNode.attrs.d
})
} else {
jsonData[key] = node.attrs.d
}
if (index === files.length - 1) {
writeJsonData()
}
})
})
})
@souporserious
Copy link
Author

Takes a Sketch file's artboards and converts them into a JSON file. Only compound paths are supported right now. Able to use multiple paths which get converted to an index based key, e.g. { 'search-0': ..., 'search-1': ... }.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment