Add idPrefix option

README.md

@@ -49,6 +49,13 @@ Adds a prefix to class names to avoid collision across svg files.
 
 default: `classPrefix: false`
 
+#### `idPrefix: boolean || string`
+
+Adds a prefix to ids to avoid collision across svg files.
+
+default: `idPrefix: false`
+
+
 ##### Example Usage
 ```js
 // Using default hashed prefix (__[hash:base64:7]__)

index.js

@@ -25,6 +25,12 @@ function getExtractedSVG(svgStr, query) {
         const name = query.classPrefix === true ? '__[hash:base64:7]__' : query.classPrefix;
         query.classPrefix = loaderUtils.interpolateName({}, name, {content: svgStr});
     }
+
+    if (!!query && !!query.idPrefix) {
+        const id_name = query.idPrefix === true ? '__[hash:base64:7]__' : query.idPrefix;
+        query.idPrefix = loaderUtils.interpolateName({}, id_name, {content: svgStr});
+    }
+
     // Clean-up XML crusts like comments and doctype, etc.
     var tokens;
     var cleanedUp = regexSequences.reduce(function (prev, regexSequence) {

lib/transformer.js

@@ -18,7 +18,7 @@ function createRemoveTagAttrs(removingTagAttrs) {
             tag.attributes = tag.attributes.filter(hasNoAttributes);
         }
         return tag;
-    }
+    };
 }
 
 function isRemovingTag(removingTags, tag) {
@@ -43,7 +43,7 @@ function createRemoveTags(removingTags) {
             // Reached the end tag of a removingTag
             removingTag = null;
         }
-    }
+    };
 }
 
 function getAttributeIndex (tag, attr) {
@@ -87,14 +87,49 @@ function createClassPrefix(classPrefix) {
             }
         }
         return tag;
-    }
+    };
+}
+
+function createIdPrefix(idPrefix) {
+    var url_pattern = /^url\(#.+\)$/i;
+    return function prefixIds(tag) {
+        var idIdx = getAttributeIndex(tag, 'id');
+        if (idIdx !== -1) {
+            //  prefix id definitions
+            tag.attributes[idIdx][1] = idPrefix + tag.attributes[idIdx][1];
+        }
+
+        if (tag.tagName == 'use') {
+            // replace references via <use xlink:href='#foo'>
+            var hrefIdx = getAttributeIndex(tag, 'xlink:href');
+            if (hrefIdx !== -1) {
+                tag.attributes[hrefIdx][1] = '#' + idPrefix + tag.attributes[hrefIdx][1].substring(1);
+
+            }
+        }
+        if (tag.attributes && tag.attributes.length > 0) {
+            // replace instances of url(#foo) in attributes
+            tag.attributes.forEach(function (attr) {
+                if (attr[1].match(url_pattern)) {
+                    attr[1] = attr[1].replace(url_pattern, function (match) {
+                        var id = match.substring(5, match.length -1);
+                        return "url(#" + idPrefix + id + ")";
+                    });
+                }
+
+            });
+        }
+
+        return tag;
+    };
 }
 
 function runTransform(tokens, configOverride) {
     var transformations = [];
     var config = conditions.isFilledObject(configOverride) ? assign({}, defaultConfig, configOverride) : defaultConfig;
 
     if (config.classPrefix         !== false) transformations.push(createClassPrefix(config.classPrefix));
+    if (config.idPrefix            !== false) transformations.push(createIdPrefix(config.idPrefix));
     if (config.removeSVGTagAttrs   === true)  transformations.push(removeSVGTagAttrs);
     if (config.removeTags          === true)  transformations.push(createRemoveTags(config.removingTags));
     if (config.removingTagAttrs.length  > 0)  transformations.push(createRemoveTagAttrs(config.removingTagAttrs));

tests/svg-inline-loader.test.js

@@ -47,6 +47,18 @@ describe('getExtractedSVG()', function(){
         assert.isTrue( processedStyleInsertedSVG.match(/class="test\.prefix-/g).length === 1 );
     });
 
+    it('should apply prefixes to ids', function () {
+        var svgWithStyle = require('raw!./fixtures/with-ids.svg');
+        var processedStyleInsertedSVG = SVGInlineLoader.getExtractedSVG(svgWithStyle, { idPrefix: 'test.prefix-' });
+
+
+        assert.isTrue( processedStyleInsertedSVG.match(/test\.prefix-foo/g).length === 3 );
+        // // replaces xlink:href=
+        assert.isTrue( processedStyleInsertedSVG.match(/xlink:href=/g).length === 1 );
+        // // replaces url(#foo)
+        assert.isTrue( processedStyleInsertedSVG.match(/url\(#test\.prefix-foo\)/g).length === 1 );
+    });
+
     it('should be able to specify tags to be removed by `removingTags` option', function () {
         var svgRemovingTags = require('raw!./fixtures/removing-tags.svg');
         var tobeRemoved = require('./fixtures/removing-tags-to-be-removed.json');
@@ -105,4 +117,5 @@ describe('getExtractedSVG()', function(){
             }
         });
     });
+
 });