@tomasvn/svgstore 3.1.3 → 3.1.5

package/.github/workflows/pages.yml

@@ -0,0 +1,33 @@
+name: Deploy documentation to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/.github/workflows/publish.yml

@@ -0,0 +1,21 @@
+name: Publish Package to npmjs
+on:
+    release:
+        types: [published]
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            id-token: write
+        steps:
+            - uses: actions/checkout@v4
+            # Setup .npmrc file to publish to npm
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.x'
+                  registry-url: 'https://registry.npmjs.org'
+            - run: npm ci
+            - run: npm publish --provenance --access public
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -1,14 +1,27 @@
 # Changelog
 
+# 3.1.5
+
+- Deployed docs site
+
+# 3.1.4
+
+    - Closes [#36][https://github.com/svgstore/svgstore/issues/36]
+    - Fix failing test
+
 # 3.1.0
+
     - implements [PR #33](https://github.com/svgstore/svgstore/pull/33) from original work
 
 # 3.1.1
+
     - parsing of `linearGradient` elements
 
 # 3.1.2
+
     - update readme file
 
 # 3.1.3
+
     - add safe clean `def` util
-    - passing `opts`, `cleanDefs: true` would break `linearGradient`
+    - passing `opts`, `cleanDefs: true` would break `linearGradient`

package/docs/index.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="Documentation and examples for svgstore, a tool for combining SVG files into a sprite.">
+	<title>svgstore documentation</title>
+	<style>
+		:root {
+			color-scheme: light;
+			font-family: system-ui, sans-serif;
+			color: #20232a;
+			background: #f7f8fa;
+		}
+		body {
+			box-sizing: border-box;
+			max-width: 760px;
+			margin: 0 auto;
+			padding: 4rem 1.5rem;
+			line-height: 1.6;
+		}
+		h1, h2 {
+			line-height: 1.2;
+		}
+		a {
+			color: #0969da;
+		}
+		code {
+			padding: 0.15rem 0.35rem;
+			border-radius: 4px;
+			background: #e9edf2;
+		}
+		pre {
+			overflow-x: auto;
+			padding: 1rem;
+			border-radius: 6px;
+			background: #20232a;
+			color: #f7f8fa;
+		}
+		pre code {
+			padding: 0;
+			background: none;
+			color: inherit;
+		}
+		nav {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 1rem;
+			margin-top: 2rem;
+		}
+	</style>
+</head>
+<body>
+	<main>
+		<h1>svgstore</h1>
+		<p>Combine multiple SVG files into one sprite using <code>&lt;symbol&gt;</code> elements.</p>
+
+		<h2>Quick start</h2>
+		<p>Install the package and add SVG files to a sprite:</p>
+		<pre><code>npm install @tomasvn/svgstore</code></pre>
+		<pre><code>const svgstore = require('@tomasvn/svgstore');
+const fs = require('fs');
+
+const sprite = svgstore()
+  .add('icon', fs.readFileSync('./icon.svg', 'utf8'));
+
+fs.writeFileSync('./sprite.svg', sprite);</code></pre>
+
+		<nav aria-label="Documentation links">
+			<a href="examples/">View the examples</a>
+			<a href="https://github.com/tomasvn/svgstore#api">API reference</a>
+			<a href="https://github.com/tomasvn/svgstore">GitHub repository</a>
+		</nav>
+	</main>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomasvn/svgstore",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "description": "Combines mulitple svg files into one.",
   "scripts": {
     "lint": "npx eslint --fix \"{src,test}/**/*.js\" && npx prettier --write \"{src,test}/**/*.js\"",

package/readme.md

@@ -6,9 +6,14 @@ Combines multiple SVG files into one using `<symbol>` elements which you may [`<
 
 ## NOTE
 
--   This is only a fork of original work, it implements this [PR #33](https://github.com/svgstore/svgstore/pull/33) from original work
--   Adds linear gradient proccessing
--   **NOT MAINTAINED**
+<blockquote>
+    <strong>NOTE:</strong> This is a fork of original work, released with patched fixes <br />
+    SEE: <a href="./CHANGELOG.md">Changelog</a>
+</blockquote>
+
+## Documentation
+
+Visit the [svgstore documentation site](https://tomasvn.github.io/svgstore/) for a quick start and examples.
 
 ## Install
 

package/src/svgstore.js

@@ -134,32 +134,33 @@ function svgstore(options) {
 					var elem = child(_elem);
 					var oldDefId = elem.attr('id');
 					var newDefId = id + '_' + oldDefId;
+					var oldHref = '#' + oldDefId;
+					var newHref = '#' + newDefId;
+					var oldUrl = 'url(' + oldHref + ')';
+					var newUrl = 'url(' + newHref + ')';
 					elem.attr('id', newDefId);
 
-					/* process use tags */
-					child('use').each(function (i, use) {
-						var hrefLink = '#' + oldDefId;
-						var checkableProperties = ['xlink:href', 'href'];
-						var foundProperty;
-						for (var j = 0; j < checkableProperties.length; j++) {
-							var currentProperty = checkableProperties[j];
-							if (child(use).prop(currentProperty) === hrefLink) {
-								foundProperty = currentProperty;
-								break;
+					child('*').each(function (i, refElem) {
+						var ref = child(refElem);
+						var attrs = refElem.attribs || {};
+						Object.keys(attrs).forEach(function (attr) {
+							var originalValue = attrs[attr];
+							var value = originalValue;
+							if (typeof value !== 'string') return;
+
+							if (
+								(attr === 'href' || attr === 'xlink:href') &&
+								value === oldHref
+							) {
+								value = newHref;
+							}
+
+							if (value.indexOf(oldUrl) !== -1) {
+								value = value.split(oldUrl).join(newUrl);
 							}
-						}
-						if (!foundProperty) {
-							return;
-						}
-						child(use).attr(foundProperty, '#' + newDefId);
-					});
 
-					/* process fill attributes */
-					child('[fill="url(#' + oldDefId + ')"]').each(function (
-						i,
-						use
-					) {
-						child(use).attr('fill', 'url(#' + newDefId + ')');
+							if (value !== originalValue) ref.attr(attr, value);
+						});
 					});
 				});
 			}

package/src/utils/safe-clean-defs.js

@@ -1,7 +1,6 @@
 function safeCleanDefsAttrs(attrs) {
 	if (attrs === true) {
-		// Default to removing 'style' only outside of defs, but skip inside defs
-		return [];
+		return ['style'];
 	}
 	if (!Array.isArray(attrs)) return [];
 	// Exclude 'style' to preserve gradient stops and fills

package/test/svgstore.js

@@ -231,6 +231,71 @@ test('should rename defs id', async (t) => {
 	t.strictEqual(store.toString(), expected);
 });
 
+test('should update all references to renamed defs ids', async (t) => {
+	const svg =
+		'<svg><defs>' +
+		'<linearGradient id="paint0"/>' +
+		'<linearGradient id="paint1" href="#paint0"/>' +
+		'<clipPath id="clip0"/>' +
+		'<mask id="mask0"/>' +
+		'<filter id="filter0"/>' +
+		'<marker id="marker0"/>' +
+		'</defs>' +
+		'<g clip-path="url(#clip0)" mask="url(#mask0)" filter="url(#filter0)" ' +
+		'marker-start="url(#marker0)" marker-mid="url(#marker0)" ' +
+		'marker-end="url(#marker0)">' +
+		'<path fill="url(#paint0)" stroke="url(#paint0)" ' +
+		'style="fill:url(#paint0);stroke:url(#paint0)"/>' +
+		'</g></svg>';
+	const output = svgstore({ inline: true, renameDefs: true })
+		.add('icon', svg)
+		.toString();
+
+	[
+		'href="#icon_paint0"',
+		'clip-path="url(#icon_clip0)"',
+		'mask="url(#icon_mask0)"',
+		'filter="url(#icon_filter0)"',
+		'marker-start="url(#icon_marker0)"',
+		'marker-mid="url(#icon_marker0)"',
+		'marker-end="url(#icon_marker0)"',
+		'fill="url(#icon_paint0)"',
+		'stroke="url(#icon_paint0)"',
+		'style="fill:url(#icon_paint0);stroke:url(#icon_paint0)"',
+	].forEach((reference) => {
+		t.ok(output.includes(reference), `expected output to include ${reference}`);
+	});
+});
+
+test('should match the renameDefs issue reproduction', async (t) => {
+	const icon =
+		'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
+		'<g clip-path="url(#clip0)"><path d="M0 12h24" stroke="url(#paint0)" stroke-width="4"/></g>' +
+		'<defs>' +
+		'<linearGradient id="paint0" x2="24" gradientUnits="userSpaceOnUse">' +
+		'<stop stop-color="red"/><stop offset="1" stop-color="blue"/>' +
+		'</linearGradient>' +
+		'<clipPath id="clip0"><rect width="12" height="24"/></clipPath>' +
+		'</defs></svg>';
+
+	const output = svgstore({ renameDefs: true })
+		.add('icon', icon)
+		.toString({ inline: true });
+
+	const expected =
+		'<svg><defs>' +
+		'<linearGradient id="icon_paint0" x2="24" gradientUnits="userSpaceOnUse">' +
+		'<stop stop-color="red"/><stop offset="1" stop-color="blue"/>' +
+		'</linearGradient>' +
+		'<clipPath id="icon_clip0"><rect width="12" height="24"/></clipPath>' +
+		'</defs>' +
+		'<symbol id="icon" viewBox="0 0 24 24">' +
+		'<g clip-path="url(#icon_clip0)"><path d="M0 12h24" stroke="url(#icon_paint0)" stroke-width="4"/></g>' +
+		'</symbol></svg>';
+
+	t.strictEqual(output, expected);
+});
+
 test('should add <view/> and <use/> to enable SVG Fragment Identifiers', async (t) => {
 	const store = svgstore({ fragmentIdentifier: (id) => `view-${id}` })
 		.add('foo', doctype + FIXTURE_SVGS.foo.replace('<svg', svgNs.slice(0, -1)))