@tomasvn/svgstore 3.1.2 → 3.1.4

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,10 +1,23 @@
 # Changelog
 
+# 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
+
+    - update readme file
+
+# 3.1.3
+
+    - add safe clean `def` util
+    - passing `opts`, `cleanDefs: true` would break `linearGradient`

package/docs/examples/make.js

@@ -3,7 +3,10 @@
 var svgstore = require('../../src/svgstore');
 var fs = require('fs');
 
-var sprites = svgstore({ fragmentIdentifier: (id) => `view-${id}` })
+var sprites = svgstore({
+	fragmentIdentifier: (id) => `view-${id}`,
+	processGradient: true,
+})
 	.add('unicorn', fs.readFileSync('./assets/unicorn.svg', 'utf8'))
 	.add('rainbow', fs.readFileSync('./assets/rainbow.svg', 'utf8'))
 	.add('gradient', fs.readFileSync('./assets/gradient.svg', 'utf8'));

package/package.json

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

package/src/svgstore.js

@@ -6,6 +6,7 @@ var removeAttributes = require('./utils/remove-attributes');
 var setAttributes = require('./utils/set-attributes');
 var svgToSymbol = require('./utils/svg-to-symbol');
 var getSvgRect = require('./utils/get-svg-rect');
+var safeCleanDefs = require("./utils/safe-clean-defs");
 
 var SELECTOR_SVG = 'svg';
 var SELECTOR_DEFS = 'defs';
@@ -15,7 +16,19 @@ var TEMPLATE_DOCTYPE =
 	'<?xml version="1.0" encoding="UTF-8"?>' +
 	'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ' +
 	'"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
-
+/**
+ * Default options used by svgstore.
+ * @typedef {Object} SvgstoreOptions
+ * @property {boolean} cleanDefs - Whether to clean <defs> elements.
+ * @property {boolean} cleanSymbols - Whether to clean <symbol> elements.
+ * @property {boolean} inline - Whether to output inline SVG.
+ * @property {boolean|Object} svgAttrs - Attributes to set on the root <svg>.
+ * @property {boolean|Object} symbolAttrs - Attributes to set on <symbol> elements.
+ * @property {boolean} copyAttrs - Whether to copy attributes from original SVG.
+ * @property {boolean} renameDefs - Whether to rename IDs inside <defs>.
+ * @property {function|null} fragmentIdentifier - Function to generate fragment identifiers.
+ * @property {boolean} processGradient - Whether to process gradients or not
+ */
 var DEFAULT_OPTIONS = {
 	cleanDefs: false,
 	cleanSymbols: false,
@@ -25,9 +38,17 @@ var DEFAULT_OPTIONS = {
 	copyAttrs: false,
 	renameDefs: false,
 	fragmentIdentifier: null,
+	processGradient: false,
 };
 
+/**
+ * Creates an SVG store to combine multiple SVG files into one.
+ *
+ * @param {Partial<SvgstoreOptions>} [options] - Configuration options to override defaults.
+ * @returns {Object} An object with methods to add SVGs and output the combined SVG.
+ */
 function svgstore(options) {
+	/** @type {SvgstoreOptions} */
 	var svgstoreOptions = Object.assign({}, DEFAULT_OPTIONS, options);
 
 	// <svg>
@@ -40,6 +61,14 @@ function svgstore(options) {
 	return {
 		element: parent,
 
+		/**
+		 * Adds an SVG file to the store.
+		 *
+		 * @param {string} id - Unique identifier for the SVG symbol.
+		 * @param {string} file - SVG file content or path to load.
+		 * @param {Partial<SvgstoreOptions>} [options] - Options to override defaults for this addition.
+		 * @returns {Object} The svgstore instance for chaining.
+		 */
 		add: function (id, file, options) {
 			var child = loadXml(file);
 			var addOptions = Object.assign({}, svgstoreOptions, options);
@@ -47,38 +76,56 @@ function svgstore(options) {
 			// <defs>
 			var childDefs = child(SELECTOR_DEFS);
 
-			removeAttributes(childDefs, addOptions.cleanDefs);
-
-			var linearGradients = childDefs.find('linearGradient');
-			if (linearGradients.length) {
-				linearGradients.each(function (i, elem) {
-					var $elem = child(elem);
-					var oldId = $elem.attr('id');
-					if (!oldId) return;
-
-					var newId = id + '__' + oldId;
-					$elem.attr('id', newId);
-
-					// Update references in fill, stroke, filter, style attributes
-					child('[fill], [stroke], [filter], [style]').each(function (
-						i,
-						refElem
-					) {
-						var $refElem = child(refElem);
-						['fill', 'stroke', 'filter', 'style'].forEach(function (
-							attr
-						) {
-							var val = $refElem.attr(attr);
-							if (val && val.includes('url(#' + oldId + ')')) {
-								var newVal = val.replace(
-									new RegExp('url\\(#' + oldId + '\\)', 'g'),
-									'url(#' + newId + ')'
+			removeAttributes(childDefs, safeCleanDefs(addOptions.cleanDefs));
+
+			if (addOptions.processGradient) {
+				var linearGradients = childDefs.find('linearGradient');
+				if (linearGradients.length) {
+					linearGradients.each(function (i, elem) {
+						var $elem = child(elem);
+						var oldId = $elem.attr('id');
+						if (!oldId) return;
+
+						var newId = id + '__' + oldId;
+						$elem.attr('id', newId);
+
+						// Update references in fill, stroke, filter, style attributes
+						child('[fill], [stroke], [filter], [style]').each(
+							function (i, refElem) {
+								var $refElem = child(refElem);
+								['fill', 'stroke', 'filter', 'style'].forEach(
+									function (attr) {
+										var val = $refElem.attr(attr);
+										if (
+											val &&
+											val.includes('url(#' + oldId + ')')
+										) {
+											var newVal = val.replace(
+												new RegExp(
+													'url\\(#' + oldId + '\\)',
+													'g'
+												),
+												'url(#' + newId + ')'
+											);
+											$refElem.attr(attr, newVal);
+										}
+									}
 								);
-								$refElem.attr(attr, newVal);
 							}
+						);
+
+						// Update <use> elements referencing the old gradient ID
+						child('use').each(function (i, useElem) {
+							var $useElem = child(useElem);
+							['xlink:href', 'href'].forEach(function (prop) {
+								var val = $useElem.attr(prop);
+								if (val === '#' + oldId) {
+									$useElem.attr(prop, '#' + newId);
+								}
+							});
 						});
 					});
-				});
+				}
 			}
 
 			/* rename defs ids (existing original logic) */
@@ -87,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 (!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.indexOf(oldUrl) !== -1) {
+								value = value.split(oldUrl).join(newUrl);
+							}
+
+							if (value !== originalValue) ref.attr(attr, value);
+						});
 					});
 				});
 			}
@@ -148,6 +196,12 @@ function svgstore(options) {
 			return this;
 		},
 
+		/**
+		 * Converts the stored SVG elements to a string.
+		 *
+		 * @param {Partial<SvgstoreOptions>} [options] - Options to override defaults for output.
+		 * @returns {string} The combined SVG as a string.
+		 */
 		toString: function (options) {
 			// Create a clone so we don't modify the parent document.
 			var clone = loadXml(parent.xml());

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

@@ -0,0 +1,10 @@
+function safeCleanDefsAttrs(attrs) {
+	if (attrs === true) {
+		return ['style'];
+	}
+	if (!Array.isArray(attrs)) return [];
+	// Exclude 'style' to preserve gradient stops and fills
+	return attrs.filter((attr) => attr !== 'style' && attr !== 'id');
+}
+
+module.exports = safeCleanDefsAttrs;

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)))