diff options
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 96 |
1 files changed, 5 insertions, 91 deletions
@@ -1,93 +1,7 @@ -const fs = require("fs") -const path = require("path") -//const svgSprite = require("svg-sprite") -const { JSDOM } = require("jsdom") -//const { optimize } = require("svgo") -const { RawSource } = require("webpack-sources") +const SVGSymbolAtlasViewPlugin = require("./atlas-plugin.js") +const MaterialSymbolsAtlasPlugin = require("./material-symbols-plugin.js") -// 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") - 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 svgStr +module.exports = { + SVGSymbolAtlasViewPlugin, + MaterialSymbolsAtlasPlugin, } - - -class SVGSymbolAtlasViewPlugin { - constructor(options = {}) { - this.suffix = options.suffix || ".svg" - this.symbolId = options.symbolId || null - } - - apply(compiler) { - compiler.hooks.thisCompilation.tap("SVGSymbolAtlasViewPlugin", (compilation) => { - compilation.hooks.processAssets.tap( - { - name: "SVGSymbolAtlasViewPlugin", - stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE, - }, - (assets) => { - for (const assetName in assets) { - if (assetName.endsWith(this.suffix)) { - const originalSVG = assets[assetName].source().toString() - const atlasSVG = generateAtlasViews(originalSVG, this.symbolId) - - // Replace old SVG asset with new SVG - compilation.updateAsset(assetName, new RawSource(atlasSVG)) - } - } - } - ) - }) - } -} - -module.exports = SVGSymbolAtlasViewPlugin |
