feat(webpack): include Babel transformation (#48)

Closes #45

Author: gregberge

.babelrc

@@ -1,13 +1,16 @@
 {
   "presets": [
-    ["env", {
-      "targets": {
-        "node": "6"
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "6"
+        }
       }
-    }]
+    ]
   ],
   "plugins": [
-    "transform-class-properties",
-    "transform-object-rest-spread"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
   ]
 }

README.md

@@ -230,7 +230,7 @@ In your `webpack.config.js`:
 ```js
 {
   test: /\.svg$/,
-  use: ['babel-loader', 'svgr/webpack'],
+  use: ['svgr/webpack'],
 }
 ```
 
@@ -252,7 +252,6 @@ const App = () => (
 {
   test: /\.svg$/,
   use: [
-    'babel-loader',
     {
       loader: 'svgr/webpack',
       options: {
@@ -272,7 +271,7 @@ In your `webpack.config.js`:
 ```js
 {
   test: /\.svg$/,
-  use: ['babel-loader', 'svgr/webpack', 'url-loader'],
+  use: ['svgr/webpack', 'url-loader'],
 }
 ```
 
@@ -289,6 +288,29 @@ const App = () => (
 )
 ```
 
+### Use your own Babel configuration
+
+By default, `svgr/webpack` includes a `babel-loader` with [optimized configuration](https://github.com/smooth-code/svgr/blob/master/src/webpack.js). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.
+
+```js
+// Example using preact
+{
+  test: /\.svg$/,
+  use: [
+    {
+      loader: 'babel-loader',
+      options: {
+        presets: ['preact', 'env'],
+      },
+    },
+    {
+      loader: 'svgr/webpack',
+      options: { babel: false },
+    }
+  ],
+}
+```
+
 ## Options
 
 SVGR ships with a handful of customizable options, usable in both the CLI and

examples/webpack/.babelrc

@@ -1,8 +1,6 @@
 {
   "name": "svgr-webpack-example",
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
     "url-loader": "^0.6.2",
     "webpack": "^3.10.0"
   }

examples/webpack/.gitignore

@@ -10,19 +10,11 @@ module.exports = {
     rules: [
       {
         test: /url\.svg$/,
-        use: [
-          'babel-loader',
-          require.resolve('../../lib/webpack'),
-          'url-loader',
-        ],
+        use: [require.resolve('../../webpack'), 'url-loader'],
       },
       {
         test: /simple\.svg$/,
-        use: ['babel-loader', require.resolve('../../lib/webpack')],
-      },
-      {
-        test: /\.js$/,
-        use: ['babel-loader'],
+        use: [require.resolve('../../webpack')],
       },
     ],
   },