Last active
February 27, 2016 20:52
-
-
Save AndrejGajdos/ba6a828dfb33fe63ac0b to your computer and use it in GitHub Desktop.
First part of gulp tak – converting SVG Sprite to separate files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var fs = require('fs'); | |
var DOMParser = require('xmldom').DOMParser; | |
var timestamp = require('console-timestamp'); | |
var config = require('./config.json'); | |
// open svg sprite file | |
fs.readFile(config.paths.svg_sprite, 'utf8', function (err, data) { | |
if (err) { | |
return console.log(timestamp('[hh:mm:ss] ') + "Read file " + config.paths.svg_sprite + " error: " + err); | |
} | |
console.log(timestamp('[hh:mm:ss] ') + "Creating .svg files..."); | |
var parser = new DOMParser(); | |
var svgSpriteContent = parser.parseFromString(data, "image/svg+xml"); | |
var symbols = svgSpriteContent.getElementsByTagName("symbol"); | |
for (var i = 0; i < symbols.length; i++) { | |
// parse elements from svg sprite | |
var pathElement = symbols.item(i).getElementsByTagName("path")[0]; | |
pathElement.setAttribute("fill", config.image.color); | |
var symbolId = symbols.item(i).getAttribute("id"); | |
var viewBoxVal = symbols.item(i).getAttribute("viewBox"); | |
var fileHeader = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\" viewBox=\"" + viewBoxVal + "\">"; | |
var fileFooter = "</svg>"; | |
// create separate svg files | |
fs.writeFile("./build/svg_files_" + colorName + "/" + symbolId + ".svg", | |
fileHeader + pathElement.toString() + fileFooter, | |
function (err) { | |
if (err) { | |
return console.log(timestamp('[hh:mm:ss] ') + err); | |
} | |
}); | |
} | |
... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment