Skip to content

Commit 80f7520

Browse files
guanghui-reniqingting
authored andcommitted
feat: support custom outputPath
1 parent 6d5d2d2 commit 80f7520

2 files changed

Lines changed: 30 additions & 15 deletions

File tree

README.md

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# SVG sprite loader
1+
# SVG sprite loader
22
[![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]
33

44
Webpack loader for creating SVG sprites.
@@ -87,7 +87,7 @@ yarn add svg-sprite-loader -D
8787

8888
### `symbolId` (default `[name]`)
8989

90-
How `<symbol>` `id` attribute should be named. All patterns from [loader-utils#interpolateName](https://github.com/webpack/loader-utils#interpolatename)
90+
How `<symbol>` `id` attribute should be named. All patterns from [loader-utils#interpolateName](https://github.com/webpack/loader-utils#interpolatename)
9191
are supported.
9292

9393
### `symbolRegExp` (default `''`)
@@ -103,9 +103,9 @@ By default depends on used webpack version: `true` for webpack >= 2, `false` oth
103103

104104
## Runtime configuration
105105

106-
When you require an image, loader transforms it to SVG `<symbol>`, adds it to the special sprite storage and returns class instance
107-
that represents symbol. It contains `id`, `viewBox` and `content` (`id`, `viewBox` and `url` in extract mode)
108-
fields and can later be used for referencing the sprite image, e.g:
106+
When you require an image, loader transforms it to SVG `<symbol>`, adds it to the special sprite storage and returns class instance
107+
that represents symbol. It contains `id`, `viewBox` and `content` (`id`, `viewBox` and `url` in extract mode)
108+
fields and can later be used for referencing the sprite image, e.g:
109109

110110
```js
111111
import twitterLogo from './logos/twitter.svg';
@@ -128,10 +128,10 @@ By default it depends on [`target`](https://webpack.js.org/configuration/target)
128128
- `svg-sprite-loader/runtime/browser-sprite.build` for 'web' target.
129129
- `svg-sprite-loader/runtime/sprite.build` for other targets.
130130

131-
If you need custom behavior, use this option to specify a path of your sprite implementation module.
131+
If you need custom behavior, use this option to specify a path of your sprite implementation module.
132132
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`.
133-
134-
Example of sprite with custom mounting target (copypasted from [browser-sprite](https://github.com/kisenka/svg-sprite-loader/blob/master/runtime/browser-sprite.js)):
133+
134+
Example of sprite with custom mounting target (copypasted from [browser-sprite](https://github.com/kisenka/svg-sprite-loader/blob/master/runtime/browser-sprite.js)):
135135

136136
```js
137137
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
155155

156156
### `runtimeGenerator` ([default generator](https://github.com/kisenka/svg-sprite-loader/blob/master/lib/runtime-generator.js))
157157

158-
Path to node.js script that generates client runtime.
158+
Path to node.js script that generates client runtime.
159159
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).
160160

161161
### `runtimeCompat` (default `false`, deprecated)
@@ -190,23 +190,38 @@ Enabled automatically for images imported from css/scss/sass/less/styl/html file
190190

191191
### `spriteFilename` (type `string|Function<string>`,default `sprite.svg`)
192192

193-
Filename of extracted sprite. Multiple sprites can be generated by specifying different loader rules restricted with `include` option or
193+
Filename of extracted sprite. Multiple sprites can be generated by specifying different loader rules restricted with `include` option or
194194
by providing custom function which recieves SVG file absolute path, e.g.:
195195

196196
```js
197197
{
198198
test: /\.svg$/,
199-
loader: 'svg-sprite-loader',
199+
loader: 'svg-sprite-loader',
200200
options: {
201201
extract: true,
202202
spriteFilename: svgPath => `sprite${svgPath.substr(-4)}`
203203
}
204204
}
205205
```
206206

207-
`[hash]` in sprite filename will be replaced by it's content hash.
207+
`[hash]` in sprite filename will be replaced by it's content hash.
208208
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!
209209

210+
### `outputPath` (type: `string`, default: `__webpack_public_path__`)
211+
212+
Custom output path for sprite svg.
213+
214+
```js
215+
{
216+
test: /\.svg$/,
217+
loader: 'svg-sprite-loader',
218+
options: {
219+
extract: true,
220+
outputPath: '/'
221+
}
222+
}
223+
```
224+
210225
<a id="plain-sprite"></a>
211226
### Plain sprite
212227

lib/runtime-generator.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,20 @@ const {
1717
*/
1818
function runtimeGenerator(params) {
1919
const { symbol, config, context } = params;
20-
const { extract, esModule, spriteModule, symbolModule, runtimeCompat } = config;
20+
const { extract, esModule, spriteModule, symbolModule, runtimeCompat, outputPath } = config;
2121
let runtime;
2222

2323
if (extract) {
2424
const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
25+
const path = stringify(outputPath) || '__webpack_public_path__';
2526
const data = `{
2627
id: ${stringify(symbol.useId)},
2728
viewBox: ${stringify(symbol.viewBox)},
28-
url: __webpack_public_path__ + ${stringify(spritePlaceholder)},
29+
url: ${path} + ${stringify(spritePlaceholder)},
2930
toString: function () {
3031
return this.url;
3132
}
3233
}`;
33-
3434
runtime = generateExport(data, esModule);
3535
} else {
3636
const spriteModuleImport = stringifyRequest({ context }, spriteModule);

0 commit comments

Comments
 (0)