Merge pull request #32 from smooth-code/improve-webpack-loader

feat: support url-loader & file-loader

README.md

@@ -223,42 +223,70 @@ svgr(svgCode, { prettier: false, componentName: 'MyComponent' }).then(
 
 SVGR has a Webpack loader, you can use it using following `webpack.config.js`:
 
+In your `webpack.config.js`:
+
 ```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.svg$/,
-        use: ['babel-loader', 'svgr/webpack'],
-      },
-    ],
-  },
+{
+  test: /\.svg$/,
+  use: ['babel-loader', 'svgr/webpack'],
 }
 ```
 
-It is also possible to specify options:
+In your code:
+
+```js
+import Star from './star.svg'
+
+const App = () => (
+  <div>
+    <Star />
+  </div>
+)
+```
+
+### Passing options
 
 ```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.svg$/,
-        use: [
-          'babel-loader',
-          {
-            loader: 'svgr/webpack',
-            options: {
-              svgo: false,
-            },
-          },
-        ],
+{
+  test: /\.svg$/,
+  use: [
+    'babel-loader',
+    {
+      loader: 'svgr/webpack',
+      options: {
+        native: true,
       },
-    ],
-  },
+    },
+  ],
 }
 ```
 
+### Using with `url-loader` or `file-loader`
+
+It is possible to use it with [`url-loader`](https://github.com/webpack-contrib/url-loader) or [`file-loader`](https://github.com/webpack-contrib/file-loader).
+
+In your `webpack.config.js`:
+
+```js
+{
+  test: /\.svg$/,
+  use: ['babel-loader', 'svgr/webpack', 'url-loader'],
+}
+```
+
+In your code:
+
+```js
+import starUrl, { ReactComponent as Star } from './star.svg'
+
+const App = () => (
+  <div>
+    <img src={starUrl} alt="star" />
+    <Star />
+  </div>
+)
+```
+
 ## Options
 
 SVGR ships with a handful of customizable options, usable in both the CLI and

examples/webpack/.babelrc

@@ -0,0 +1 @@
+{ "presets": ["react"] }

examples/webpack/.gitignore

@@ -0,0 +1 @@
+dist/

examples/webpack/main.js

@@ -0,0 +1,5 @@
+import star, { ReactComponent } from './star.url.svg'
+import Star from './star.simple.svg'
+
+console.log('url', typeof star, typeof ReactComponent)
+console.log('simple', typeof Star)

examples/webpack/package.json

@@ -0,0 +1,9 @@
+{
+  "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/webpack.config.js

@@ -0,0 +1,29 @@
+const path = require('path')
+
+module.exports = {
+  entry: ['./main'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /url\.svg$/,
+        use: [
+          'babel-loader',
+          require.resolve('../../lib/webpack'),
+          'url-loader',
+        ],
+      },
+      {
+        test: /simple\.svg$/,
+        use: ['babel-loader', require.resolve('../../lib/webpack')],
+      },
+      {
+        test: /\.js$/,
+        use: ['babel-loader'],
+      },
+    ],
+  },
+}