fix up

1 files changed, 28 insertions, 19 deletions

diff --git a/index.js b/index.js
index ce66b2e..1abe76a 100644
--- a/index.js
+++ b/index.js
@@ -6,7 +6,7 @@ const { JSDOM } = require("jsdom")
 const { RawSource } = require("webpack-sources")
 
 // Generate <view>'s for referencing sprites in css
-function generateAtlasViews(svgFile) {
+function generateAtlasViews(svgFile, symbolId) {
 	const dom = new JSDOM(svgFile)
 	const document = dom.window.document
 	const svg = document.querySelector("svg")
@@ -18,27 +18,30 @@ function generateAtlasViews(svgFile) {
 	let col = 0
 	const totalCols = Math.floor(Math.sqrt(symbols.length))
 	for (const symbol of symbols) {
-		const x = col*width
-		const y = row*height
-		const id = symbol.getAttribute("id")
+		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 view = document.createElement("view")
-		view.setAttribute("id", `${id}-view`)
-		view.setAttribute("viewBox", `0 0 ${x} ${y}`)
-		const svgSprite = document.createElement("svg")
-		svgSprite.setAttribute("width", width)
-		svgSprite.setAttribute("height", height)
-		svgSprite.setAttribute("viewBox", "0 -960 960 960")
-		svgSprite.setAttribute("x", x)
-		svgSprite.setAttribute("y", y)
+		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
-		svgSprite.appendChild(svgUse)
-		svg.appendChild(view)
-		svg.appendChild(svgSprite)
+		svg.appendChild(svgView)
+		svg.appendChild(svgUse)
 
 		// Adjust row/col
 		col++
@@ -47,15 +50,21 @@ function generateAtlasViews(svgFile) {
 			row++
 		}
 	}
-	svg.setAttribute("viewBox", `0 0 ${(totalCols+1)*width} ${(row+1)*height}`)
+	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`)
 
-	return svg.outerHTML
+	const svgStr = svg.outerHTML.replaceAll("viewbox", "viewBox") /* JSDOM will lower-case all attributes */
+	return svgStr
 }
 
 
 class SVGSymbolAtlasViewPlugin {
 	constructor(options = {}) {
 		this.suffix = options.suffix || ".svg"
+		this.symbolId = options.symbolId || null
 	}
 
 	apply(compiler) {
@@ -69,7 +78,7 @@ class SVGSymbolAtlasViewPlugin {
 					for (const assetName in assets) {
 						if (assetName.endsWith(this.suffix)) {
 							const originalSVG = assets[assetName].source().toString()
-							const atlasSVG = generateAtlasViews(originalSVG)
+							const atlasSVG = generateAtlasViews(originalSVG, this.symbolId)
 
 							// Replace old SVG asset with new SVG
 							compilation.updateAsset(assetName, new RawSource(atlasSVG))