feat: add webpack loader

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 lib/
 __fixtures_build__/
+src/__fixtures__/dist/
 coverage/

README.md

@@ -179,6 +179,46 @@ svgr(svgCode, { prettier: false }).then(jsCode => {
 })
 ```
 
+## Webpack usage
+
+SVGR has a Webpack loader, you can use it using following `webpack.config.js`:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: ['svgr/webpack', 'babel-loader']
+      }
+    ]
+  }
+}
+```
+
+It is also possible to specify options:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'svgr/webpack',
+            options: {
+              svgo: false
+            }
+          },
+          'babel-loader',
+        ]
+      }
+    ]
+  }
+}
+```
+
 ## Options
 
 SVGR ships with a handful of customizable options, usable in both the CLI and API.

package.json

@@ -16,31 +16,35 @@
   "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.0.1",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "codecov": "^2.3.0",
     "conventional-github-releaser": "^1.1.12",
-    "conventional-recommended-bump": "^1.0.1",
-    "eslint": "^4.6.0",
-    "eslint-config-airbnb-base": "^11.3.2",
-    "eslint-config-prettier": "^2.4.0",
+    "conventional-recommended-bump": "^1.0.2",
+    "eslint": "^4.8.0",
+    "eslint-config-airbnb-base": "^12.0.1",
+    "eslint-config-prettier": "^2.6.0",
     "eslint-plugin-import": "^2.7.0",
-    "jest": "^20.0.4",
-    "mversion": "^1.10.1"
+    "jest": "^21.2.1",
+    "mversion": "^1.10.1",
+    "react": "^16.0.0",
+    "webpack": "^3.6.0"
   },
   "dependencies": {
     "chalk": "^2.1.0",
     "commander": "^2.11.0",
     "glob": "^7.1.2",
     "h2x-core": "^0.1.6",
     "h2x-plugin-jsx": "^0.1.6",
+    "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
     "mz": "^2.6.0",
     "output-file-sync": "^2.0.0",
-    "prettier": "^1.6.1",
+    "prettier": "^1.7.3",
     "recursive-readdir": "^2.2.1",
     "svgo": "^0.7.2"
   },
@@ -49,7 +53,10 @@
   },
   "jest": {
     "rootDir": "src",
-    "coverageDirectory": "./coverage/"
+    "coverageDirectory": "./coverage/",
+    "watchPathIgnorePatterns": [
+      "<rootDir>/__fixtures__"
+    ]
   },
   "scripts": {
     "build": "rm -rf lib/ && NODE_ENV=production babel src -d lib",

src/__fixtures__/main.js

@@ -0,0 +1,3 @@
+import icon from './icon.svg'
+
+global.exported_icon = icon

src/webpack.js

@@ -0,0 +1,12 @@
+import loaderUtils from 'loader-utils'
+import convert from './'
+
+function svgrLoader(source) {
+  const callback = this.async()
+  const options = loaderUtils.getOptions(this) || {}
+  convert(source, options)
+    .then(result => callback(null, result))
+    .catch(err => callback(err))
+}
+
+export default svgrLoader

src/webpack.test.js

@@ -0,0 +1,59 @@
+import path from 'path'
+import webpack from 'webpack'
+
+describe('webpack loader', () => {
+  it('should convert file', () =>
+    new Promise((resolve, reject) => {
+      webpack(
+        {
+          entry: path.resolve(__dirname, '__fixtures__/main.js'),
+          output: {
+            path: path.resolve(__dirname, '__fixtures__/dist'),
+          },
+          module: {
+            rules: [
+              {
+                test: /\.svg$/,
+                use: [
+                  {
+                    loader: 'babel-loader',
+                    options: {
+                      presets: [
+                        [
+                          'env',
+                          {
+                            targets: {
+                              node: '6',
+                            },
+                          },
+                        ],
+                        'react',
+                      ],
+                      plugins: [
+                        'transform-class-properties',
+                        'transform-object-rest-spread',
+                      ],
+                    },
+                  },
+                  {
+                    loader: path.resolve(__dirname, 'webpack.js'),
+                    options: {
+                      expandProps: false,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        },
+        (err, stats) => {
+          if (err || stats.hasErrors()) reject(err)
+          /* eslint-disable global-require, import/no-dynamic-require */
+          require(path.resolve(__dirname, '__fixtures__/dist/main.js'))
+          /* eslint-enable global-require, import/no-dynamic-require */
+          expect(global.exported_icon.name).toBe('SvgComponent')
+          resolve()
+        },
+      )
+    }))
+})

webpack.js

@@ -0,0 +1 @@
+module.exports = require('./lib/webpack')