fix(webpack): forward filePath in webpack loader

This will fix all SVGO issues.

BREAKING CHANGE: runtime configuration is now loaded using webpack
loader.

Fixes #177.
Fixes #188.

Author: gregberge

packages/webpack/src/__snapshots__/index.test.js.snap

@@ -3,7 +3,7 @@
 exports[`webpack loader should convert file (babel: false) 1`] = `
 "import React from 'react';
 
-const SvgComponent = () => React.createElement(\\"svg\\", {
+const Icon = () => React.createElement(\\"svg\\", {
   width: 88,
   height: 88
 }, React.createElement(\\"g\\", {
@@ -16,7 +16,7 @@ const SvgComponent = () => React.createElement(\\"svg\\", {
   d: \\"M51 37L37 51M51 51L37 37\\"
 })));
 
-export default SvgComponent;"
+export default Icon;"
 `;
 
 exports[`webpack loader should convert file 1`] = `
@@ -37,11 +37,11 @@ React.createElement(\\"svg\\", {
   d: \\"M51 37L37 51M51 51L37 37\\"
 })));
 
-var SvgComponent = function SvgComponent() {
+var Icon = function Icon() {
   return _ref;
 };
 
-export default SvgComponent;"
+export default Icon;"
 `;
 
 exports[`webpack loader should support url-loader 1`] = `
@@ -62,10 +62,10 @@ React.createElement(\\"svg\\", {
   d: \\"M51 37L37 51M51 51L37 37\\"
 })));
 
-var SvgComponent = function SvgComponent() {
+var Icon = function Icon() {
   return _ref;
 };
 
 export default 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI4OHB4IiB2aWV3Qm94PSIwIDAgODggODgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5EaXNtaXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkJsb2NrcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9IkRpc21pc3MiIHN0cm9rZT0iIzA2Mzg1NSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUxLDM3IEwzNyw1MSIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik01MSw1MSBMMzcsMzciIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==';
-export { SvgComponent as ReactComponent };"
+export { Icon as ReactComponent };"
 `;

packages/webpack/src/index.js

@@ -39,7 +39,10 @@ function svgrLoader(source) {
     })
 
   const tranformSvg = svg =>
-    convert(svg, options, { webpack: { previousExport } })
+    convert(svg, options, {
+      webpack: { previousExport },
+      filePath: this.resourcePath,
+    })
       .then(jsCode => (babel ? pBabelTransform(jsCode) : jsCode))
       .then(result => callback(null, result))
       .catch(err => callback(err))