diff options
Diffstat (limited to 'utils.js')
| -rw-r--r-- | utils.js | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/utils.js b/utils.js new file mode 100644 index 0000000..0e372ae --- /dev/null +++ b/utils.js @@ -0,0 +1,78 @@ +const svgSprite = require("svg-sprite") +const { optimize } = require("svgo") +const { JSDOM } = require("jsdom") + +// Generate <view>'s for referencing sprites in css +function generateAtlasViews(svgFile, symbolId) { + const dom = new JSDOM(svgFile) + const document = dom.window.document + const svg = document.querySelector("svg") + + const symbols = document.querySelectorAll("symbol") + const width = 24 + const height = 24 + let row = 0 + let col = 0 + const totalCols = Math.floor(Math.sqrt(symbols.length)) + for (const symbol of symbols) { + const x = col * width + const y = row * height + + let id = symbol.getAttribute("id") + symbol.removeAttribute("xmlns") + if (symbolId) { + id = symbolId(id) + symbol.setAttribute("id", id) + } + + // Create elements + const svgView = document.createElement("view") + svgView.setAttribute("id", `${id}-view`) + svgView.setAttribute("viewBox", `${x} ${y} ${width} ${height}`) + const svgUse = document.createElement("use") + svgUse.setAttribute("width", width) + svgUse.setAttribute("height", height) + //svgUse.setAttribute("viewBox", "0 -960 960 960") + svgUse.setAttribute("x", x) + svgUse.setAttribute("y", y) + svgUse.setAttribute("href", `#${id}`) + + // Append elements + svg.appendChild(svgView) + svg.appendChild(svgUse) + + // Adjust row/col + col++ + if (col > totalCols) { + col = 0 + row++ + } + } + const cWidth = (totalCols + 1) * width + const cHeight = (row + 1) * height + svg.setAttribute("viewBox", `0 0 ${cWidth} ${cHeight}`) + svg.setAttribute("width", `${cWidth}px`) + svg.setAttribute("height", `${cHeight}px`) + + const svgStr = svg.outerHTML.replaceAll("viewbox", "viewBox") // JSDOM will lower-case all attributes + return optimize(svgStr, { + multipass: true, + plugins: [{ name: "removeUnknownsAndDefaults", active: false }], // Prevent changing of ids + }).data +} + +async function generateAtlasViewsFromReferences(refs, symbolId) { + const spriter = new svgSprite({ mode: { symbol: { dest: "", sprite: "icons.svg" } } }) + // Add refs to spriter + for (const ref of refs) { + const name = (ref.name ?? ref.symbol ?? ref.path.replace(".svg", "")) + ".svg" // Supposed to pass a file path, make a fake one + spriter.add(name, null, ref.svg) + } + + // Compile and return atlas + const { result } = await spriter.compileAsync() + return generateAtlasViews(result.symbol.sprite.contents.toString(), symbolId) +} + + +module.exports = { generateAtlasViews, generateAtlasViewsFromReferences } |
