feat: support custom outputPath

README.md

@@ -1,4 +1,4 @@
-# SVG sprite loader 
+# SVG sprite loader
 [![NPM version][version-img]][versions-img] [![Build status][ci-img]][ci-url] [![CodeClimate score][codeclimate-img]][codeclimate-url] [![Documentation score][docs-coverage-img]][docs-coverage-url] [![Dependencies status][deps-img]][deps-url] [![Dev dependencies status][dev-deps-img]][dev-deps-url] [![NPM downloads][downloads-img]][npm-url]
 
 Webpack loader for creating SVG sprites.
@@ -87,7 +87,7 @@ yarn add svg-sprite-loader -D
 
 ### `symbolId` (default `[name]`)
 
-How `<symbol>` `id` attribute should be named. All patterns from [loader-utils#interpolateName](https://github.com/webpack/loader-utils#interpolatename) 
+How `<symbol>` `id` attribute should be named. All patterns from [loader-utils#interpolateName](https://github.com/webpack/loader-utils#interpolatename)
 are supported.
 
 ### `symbolRegExp` (default `''`)
@@ -103,9 +103,9 @@ By default depends on used webpack version: `true` for webpack >= 2, `false` oth
 
 ## Runtime configuration
 
-When you require an image, loader transforms it to SVG `<symbol>`, adds it to the special sprite storage and returns class instance 
-that represents symbol. It contains `id`, `viewBox` and `content` (`id`, `viewBox` and `url` in extract mode) 
-fields and can later be used for referencing the sprite image, e.g: 
+When you require an image, loader transforms it to SVG `<symbol>`, adds it to the special sprite storage and returns class instance
+that represents symbol. It contains `id`, `viewBox` and `content` (`id`, `viewBox` and `url` in extract mode)
+fields and can later be used for referencing the sprite image, e.g:
 
 ```js
 import twitterLogo from './logos/twitter.svg';
@@ -128,10 +128,10 @@ By default it depends on [`target`](https://webpack.js.org/configuration/target)
 - `svg-sprite-loader/runtime/browser-sprite.build` for 'web' target.
 - `svg-sprite-loader/runtime/sprite.build` for other targets.
 
-If you need custom behavior, use this option to specify a path of your sprite implementation module. 
+If you need custom behavior, use this option to specify a path of your sprite implementation module.
 Path will be resolved relative to the current webpack build folder, e.g. `utils/sprite.js` placed in current project dir should be written as `./utils/sprite`.
- 
-Example of sprite with custom mounting target (copypasted from [browser-sprite](https://github.com/kisenka/svg-sprite-loader/blob/master/runtime/browser-sprite.js)): 
+
+Example of sprite with custom mounting target (copypasted from [browser-sprite](https://github.com/kisenka/svg-sprite-loader/blob/master/runtime/browser-sprite.js)):
 
 ```js
 import BrowserSprite from 'svg-baker-runtime/src/browser-sprite';
@@ -155,7 +155,7 @@ Same as `spriteModule`, but for sprite symbol. By default also depends on `targe
 
 ### `runtimeGenerator` ([default generator](https://github.com/kisenka/svg-sprite-loader/blob/master/lib/runtime-generator.js))
 
-Path to node.js script that generates client runtime. 
+Path to node.js script that generates client runtime.
 Use this option if you need to produce your own runtime, e.g. React component configured with imported symbol. [Example](https://github.com/kisenka/svg-sprite-loader/tree/master/examples/custom-runtime-generator).
 
 ### `runtimeCompat` (default `false`, deprecated)
@@ -190,23 +190,38 @@ Enabled automatically for images imported from css/scss/sass/less/styl/html file
 
 ### `spriteFilename` (type `string|Function<string>`,default `sprite.svg`)
 
-Filename of extracted sprite. Multiple sprites can be generated by specifying different loader rules restricted with `include` option or 
+Filename of extracted sprite. Multiple sprites can be generated by specifying different loader rules restricted with `include` option or
 by providing custom function which recieves SVG file absolute path, e.g.:
 
 ```js
 {
   test: /\.svg$/,
-  loader: 'svg-sprite-loader', 
+  loader: 'svg-sprite-loader',
   options: {
     extract: true,
     spriteFilename: svgPath => `sprite${svgPath.substr(-4)}`
   }
 }
 ```
 
-`[hash]` in sprite filename will be replaced by it's content hash. 
+`[hash]` in sprite filename will be replaced by it's content hash.
 It is also possible to generate sprite for each chunk by using `[chunkname]` pattern in spriteFilename option. This is experimental feature, use it with caution!
 
+### `outputPath` (type: `string`, default: `__webpack_public_path__`)
+
+Custom output path for sprite svg.
+
+```js
+{
+  test: /\.svg$/,
+  loader: 'svg-sprite-loader',
+  options: {
+    extract: true,
+    outputPath: '/'
+  }
+}
+```
+
 <a id="plain-sprite"></a>
 ### Plain sprite
 

lib/runtime-generator.js

@@ -17,20 +17,20 @@ const {
  */
 function runtimeGenerator(params) {
   const { symbol, config, context } = params;
-  const { extract, esModule, spriteModule, symbolModule, runtimeCompat } = config;
+  const { extract, esModule, spriteModule, symbolModule, runtimeCompat, outputPath } = config;
   let runtime;
 
   if (extract) {
     const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
+    const path = stringify(outputPath) || '__webpack_public_path__';
     const data = `{
       id: ${stringify(symbol.useId)},
       viewBox: ${stringify(symbol.viewBox)},
-      url: __webpack_public_path__ + ${stringify(spritePlaceholder)},
+      url: ${path} + ${stringify(spritePlaceholder)},
       toString: function () {
         return this.url;
       }
     }`;
-
     runtime = generateExport(data, esModule);
   } else {
     const spriteModuleImport = stringifyRequest({ context }, spriteModule);