@tomasvn/svgstore 3.1.2 → 3.1.3

package/CHANGELOG.md

@@ -7,4 +7,8 @@
     - 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.3",
   "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) */
@@ -148,6 +195,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,11 @@
+function safeCleanDefsAttrs(attrs) {
+	if (attrs === true) {
+		// Default to removing 'style' only outside of defs, but skip inside defs
+		return [];
+	}
+	if (!Array.isArray(attrs)) return [];
+	// Exclude 'style' to preserve gradient stops and fills
+	return attrs.filter((attr) => attr !== 'style' && attr !== 'id');
+}
+
+module.exports = safeCleanDefsAttrs;