Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Node.js Helper for parsing Adobe XD .svg files (while updating for Reticle Designer)
// Node.js Helper for parsing Adobe XD .svg files while updating for use in Reticle Designer:
// https://derekknox.com/articles/reticle-designer-part-1-deconstructing-the-design/
// https://derekknox.com/articles/reticle-designer-part-2-subtle-gamification/
// https://derekknox.com/articles/reticle-designer-part-3-svg-flexbox-react-mobx
// The parsing code and processFile() function could be abstracted for custom use
var fs = require('fs');
fs.readdir('.', function (err, files) {
// Directory error escape condition
if (err) {
console.error("Error reading directory.", err);
process.exit(1);
}
// Populate graphics library
var graphicsLibrary = '',
fileData;
files.forEach(function (fileName) {
// Only process the SVG files
if(!fileName.includes('.svg')) { return; }
// Fill graphics library with file data
fileData = fs.readFileSync(fileName, 'utf8');
graphicsLibrary += processFile(fileName, fileData) + '\n';
});
function processFile(fileName, fileData) {
var str = '';
// Clean unwanted SVG that's auto generated during export of Adobe XD
str = fileData.replace(/(<svg)([^<] *| [^>] *).*(100"\/>)/gm, '');
// Clean unwanted classes
str = str.replace(/(class="." )/gm, '');
// Clean unwanted closing SVG
str = str.replace(/(<\/svg>)/gm, '');
// Prepend desired pre-baked SVG
str = ('<g id="' + fileName.replace('.svg', '') + '"><use href="#gfx-bg" />').concat(str);
return str;
}
console.log(graphicsLibrary);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment