Merge pull request #110 from vadymshymko/add-interpolate-to-sprite-filename

Allow use interpolate name patterns in spriteFilePath

Author: vadymshymko

README.md

@@ -105,6 +105,6 @@ import iconData from 'path/to/some/icon-file-name.svg';
 | Name           | Type                             | Default value | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | -------------- | -------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | symbolId       | `string`&nbsp;\|&nbsp;`function` | `"[name]"`    | Sprite item (single icon) `<symbol>`&nbsp;`id` attribute value.<br />`string` or `function` that takes the file path of the original icon as an argument and returns `string`.<br /><br />You can use [interpolateName](https://github.com/webpack/loader-utils#interpolatename) patterns.<br /> Default value (`"[name]"`) is equal to icon filename (without extension). For example, by default symbolId for `file1.svg` file will be `file1`                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| spriteFilePath | `string`                         | `sprite.svg`  | Path to sprite file.<br /> `webpack.output.path` is included                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| spriteFilePath | `string`                         | `sprite.svg`  | Path to sprite file.<br /> `webpack.output.path` is included. You can use [interpolateName](https://github.com/webpack/loader-utils#interpolatename) patterns.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | svgoOptimize   | `boolean` \| `object`            | `true`        | Enable/Disable/Customize source svg file optimization with [svgo.optimize](https://github.com/svg/svgo#optimize). The following options are used by default: <br /><pre>`{`<br />&nbsp;&nbsp;`plugins: [`<br />&nbsp;&nbsp;&nbsp;&nbsp;`{`<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`name: 'preset-default',`<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`params: {`<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`overrides: {`<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`removeViewBox: false,`<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`},`<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`},`<br />&nbsp;&nbsp;&nbsp;&nbsp;`},`<br />&nbsp;&nbsp;&nbsp;&nbsp;`'removeXMLNS',`<br />&nbsp;&nbsp;`],`<br />`}`</pre> You can disable it completely (by passing `false`) or use your own configuration (see [svgo docs](https://github.com/svg/svgo#optimize)) |
 | **addContent** | `boolean`                        | `false`       | Add svg content as property to transformed svg object (may increase bundle size when enabled)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-sprite-generation-loader",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Webpack loader for generating external svg symbol sprite files",
   "main": "index.js",
   "scripts": {

plugin.js

@@ -1,3 +1,4 @@
+const loaderUtils = require('loader-utils');
 const svgSpriteState = require('./utils/spriteState');
 
 class SvgSpriteGeneratorPlugin {
@@ -24,9 +25,23 @@ class SvgSpriteGeneratorPlugin {
           () => {
             if (compilation.options.loader.target === 'web') {
               Object.keys(svgSpriteState.sprites).forEach((spriteFilePath) => {
-                compilation.emitAsset(
+                const spriteContent = svgSpriteState.getSpriteContent(
+                  spriteFilePath,
+                  this.params
+                );
+
+                const interpolatedPath = loaderUtils.interpolateName(
+                  { resourcePath: spriteFilePath },
                   spriteFilePath,
-                  new RawSource(svgSpriteState.getSpriteContent(spriteFilePath, this.params))
+                  {
+                    context: compilation.options.context,
+                    content: spriteContent,
+                  }
+                );
+
+                compilation.emitAsset(
+                  interpolatedPath,
+                  new RawSource(spriteContent)
                 );
               });
             }