aboutsummaryrefslogtreecommitdiff
path: root/index.js
diff options
context:
space:
mode:
authorTim Keller <tjkeller.xyz>2025-05-23 14:22:55 -0500
committerTim Keller <tjkeller.xyz>2025-05-23 14:22:55 -0500
commite01a5e79337f31e656ed6d87c3cc168a06f0f27a (patch)
tree7c3dd29f72627488dbe810847083bbed925b95e4 /index.js
parent364f239918c6ef3f110a437aab2bab0891337563 (diff)
downloadmaterial-svg-atlas-plugin-webpack-e01a5e79337f31e656ed6d87c3cc168a06f0f27a.tar.xz
material-svg-atlas-plugin-webpack-e01a5e79337f31e656ed6d87c3cc168a06f0f27a.zip
material symbols plugin added. Cleanup more make better
Diffstat (limited to 'index.js')
-rw-r--r--index.js96
1 files changed, 5 insertions, 91 deletions
diff --git a/index.js b/index.js
index 1abe76a..e28488f 100644
--- a/index.js
+++ b/index.js
@@ -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