Skip to content

Instantly share code, notes, and snippets.

@souporserious
Created September 10, 2017 02:11
Show Gist options
  • Save souporserious/d9b2f9f64d1d72502cca66aa2da248e2 to your computer and use it in GitHub Desktop.
Save souporserious/d9b2f9f64d1d72502cca66aa2da248e2 to your computer and use it in GitHub Desktop.
Converts a Sketch file's artboards to a folder of SVGs and outputs an array of path data
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, '../packages/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

This was eventually built into a Webpack loader found here: https://github.com/souporserious/sketch-to-svg-json-loader

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