Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
svg-sprite-loader
Advanced tools
svg-sprite-loader - npm Package Compare versions
Comparing version 3.7.3 to 3.8.0
@@ -5,2 +5,18 @@ # Change Log | ||
| <a name="3.8.0"></a> | ||
| # [3.8.0](https://github.com/kisenka/svg-sprite-loader/compare/v3.7.3...v3.8.0) (2018-05-26) | ||
| ### Bug Fixes | ||
| * error link in pr template ([7b6cf30](https://github.com/kisenka/svg-sprite-loader/commit/7b6cf30)) | ||
| ### Features | ||
| * support `publicPath` option ([793a7bf](https://github.com/kisenka/svg-sprite-loader/commit/793a7bf)) | ||
| * support custom outputPath ([80f7520](https://github.com/kisenka/svg-sprite-loader/commit/80f7520)) | ||
| <a name="3.7.3"></a> | ||
@@ -7,0 +23,0 @@ ## [3.7.3](https://github.com/kisenka/svg-sprite-loader/compare/v3.7.2...v3.7.3) (2018-03-19) |
@@ -20,3 +20,3 @@ const { stringifyRequest } = require('loader-utils'); | ||
| const { symbol, config, context } = params; | ||
| const { extract, esModule, spriteModule, symbolModule, runtimeCompat } = config; | ||
| const { extract, esModule, spriteModule, symbolModule, runtimeCompat, publicPath } = config; | ||
| let runtime; | ||
@@ -26,6 +26,7 @@ | ||
| const spritePlaceholder = generateSpritePlaceholder(symbol.request.file); | ||
| const path = stringify(publicPath) || '__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 () { | ||
@@ -35,3 +36,2 @@ return this.url; | ||
| }`; | ||
| runtime = generateExport(data, esModule); | ||
@@ -38,0 +38,0 @@ } else { |
| { | ||
| "name": "svg-sprite-loader", | ||
| "version": "3.7.3", | ||
| "version": "3.8.0", | ||
| "description": "Webpack loader for creating SVG sprites", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -1,2 +0,2 @@ | ||
| # 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] | ||
@@ -15,15 +15,17 @@ | ||
| - [Configuration](#configuration) | ||
| - [`symbolId`](#symbolid-default-name) | ||
| - [`esModule`](#esmodule-default-true-autoconfigured) | ||
| - [`symbolId`](#symbol-id) | ||
| - [`symbolRegExp`](#symbol-regexp) | ||
| - [`esModule`](#es-module) | ||
| - [Runtime configuration](#runtime-configuration) | ||
| - [`spriteModule`](#spritemodule-autoconfigured) | ||
| - [`symbolModule`](#symbolmodule-autoconfigured) | ||
| - [`runtimeGenerator`](#runtimegenerator-default-generator) | ||
| - [`runtimeCompat`](#runtimecompat-default-false-deprecated) | ||
| - [`runtimeOptions`](#runtimeoptions) | ||
| - [`spriteModule`](#sprite-module) | ||
| - [`symbolModule`](#symbol-module) | ||
| - [`runtimeGenerator`](#runtime-generator) | ||
| - [`runtimeCompat`](#runtime-compat) (deprecated) | ||
| - [`runtimeOptions`](#runtime-options) | ||
| - [Extract configuration](#extract-configuration) | ||
| - [`extract`](#extract-default-false-autoconfigured) | ||
| - [`spriteFilename`](#spritefilename-default-spritesvg) | ||
| - [plain sprite](#plain-sprite) | ||
| - [sprite attributes](#sprite-attributes) | ||
| - [`extract`](#extract) | ||
| - [`spriteFilename`](#sprite-filename) | ||
| - [`publicPath`](#public-path) | ||
| - [`plainSprite`](#plain-sprite) | ||
| - [`spriteAttrs`](#sprite-attrs) | ||
| - [Examples](#examples) | ||
@@ -88,11 +90,13 @@ - [Contributing guidelines](#contributing-guidelines) | ||
| <a id="symbol-id"></a> | ||
| ### `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. | ||
| <a id="symbol-regexp"></a> | ||
| ### `symbolRegExp` (default `''`) | ||
| Passed to the symbolId interpolator to support the [N] pattern in the loader-utils name interpolator | ||
| <a id="es-module"></a> | ||
| ### `esModule` (default `true`, autoconfigured) | ||
@@ -108,4 +112,5 @@ | ||
| 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` 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: | ||
@@ -115,2 +120,3 @@ ```js | ||
| // twitterLogo === SpriteSymbol<id: string, viewBox: string, content: string> | ||
| // Extract mode: SpriteSymbol<id: string, viewBox: string, url: string, toString: Function> | ||
@@ -126,2 +132,3 @@ const rendered = ` | ||
| <a id="sprite-module"></a> | ||
| ### `spriteModule` (autoconfigured) | ||
@@ -134,7 +141,7 @@ | ||
| 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 | ||
@@ -154,2 +161,3 @@ import BrowserSprite from 'svg-baker-runtime/src/browser-sprite'; | ||
| <a id="symbol-module"></a> | ||
| ### `symbolModule` (autoconfigured) | ||
@@ -161,7 +169,9 @@ | ||
| <a id="runtime-generator"></a> | ||
| ### `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). | ||
| <a id="runtime-compat"></a> | ||
| ### `runtimeCompat` (default `false`, deprecated) | ||
@@ -171,2 +181,3 @@ | ||
| <a id="runtime-options"></a> | ||
| ### `runtimeOptions` | ||
@@ -193,2 +204,3 @@ | ||
| <a id="extract"></a> | ||
| ### `extract` (default `false`, autoconfigured) | ||
@@ -199,5 +211,6 @@ | ||
| <a id="sprite-filename"></a> | ||
| ### `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.: | ||
@@ -208,3 +221,3 @@ | ||
| test: /\.svg$/, | ||
| loader: 'svg-sprite-loader', | ||
| loader: 'svg-sprite-loader', | ||
| options: { | ||
@@ -217,5 +230,21 @@ extract: true, | ||
| `[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! | ||
| <a id="public-path"></a> | ||
| ### `publicPath` (type: `string`, default: `__webpack_public_path__`) | ||
| Custom public path for sprite file. | ||
| ```js | ||
| { | ||
| test: /\.svg$/, | ||
| loader: 'svg-sprite-loader', | ||
| options: { | ||
| extract: true, | ||
| publicPath: '/' | ||
| } | ||
| } | ||
| ``` | ||
| <a id="plain-sprite"></a> | ||
@@ -234,3 +263,3 @@ ### Plain sprite | ||
| <a id="sprite-attributes"></a> | ||
| <a id="sprite-attrs"></a> | ||
| ### Sprite attributes | ||
@@ -237,0 +266,0 @@ |
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.02%
1332127
- Lines of code
28493
- Number of lines in readme file
- increased by10.78%
298
Worsened metrics
- Number of package files
- decreased by-0.95%
104
No dependency changes