diff --git a/README.md b/README.md index 646f7e9..12e95af 100644 --- a/README.md +++ b/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 `` `id` attribute should be named. All patterns from [loader-utils#interpolateName](https://github.com/webpack/loader-utils#interpolatename) +How `` `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 ``, 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 ``, 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,13 +190,13 @@ Enabled automatically for images imported from css/scss/sass/less/styl/html file ### `spriteFilename` (type `string|Function`,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)}` @@ -204,9 +204,24 @@ by providing custom function which recieves SVG file absolute path, e.g.: } ``` -`[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: '/' + } +} +``` + ### Plain sprite diff --git a/lib/runtime-generator.js b/lib/runtime-generator.js index 764ccea..39c4053 100644 --- a/lib/runtime-generator.js +++ b/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);