Skip to content

Commit 35f5074

Browse files
committed
Update README
1 parent e4c811a commit 35f5074

File tree

1 file changed

+23
-13
lines changed

1 file changed

+23
-13
lines changed

README.md

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,38 +26,49 @@ npm i react-svg-loader
2626
## Usage
2727

2828
```js
29-
var Image1 = require('react-svg?es5=1!./image1.svg');
29+
const Image1 = require('react-svg!./image1.svg');
3030
// or
31-
var Image2 = require('babel!react-svg!./image2.svg');
31+
const Image2 = require('babel!react-svg!./image1.svg');
3232

3333
// and use it as
3434
<Image1 width={50} height={50}/>
3535
<Image2 width={50} height={50}/>
3636
```
3737

38-
### ES2015 + JSX output
38+
### Loader output
3939

40-
By default the loader outputs ES2015 and JSX code and should be transpiled with babel or any other transpiler that supports ES2015 and JSX.
40+
By default the loader outputs ES2015 code (with JSX compiled to JavaScript using babel-preset-react). You can combine it with babel-loader to compile it down to ES5.
4141

4242
```js
4343
// In your webpack config
4444
{
4545
test: /\.svg$/,
46-
loader: 'babel!react-svg'
46+
loaders: [
47+
{
48+
loader: 'babel',
49+
query: {
50+
presets: ['es2015']
51+
}
52+
},
53+
{
54+
loader: 'react-svg',
55+
query: {
56+
jsx: true
57+
}
58+
}
59+
]
4760
}
4861
```
4962

50-
### ES5 output
51-
52-
Pass loader query `es5=true`.
63+
### JSX output
5364

54-
Note: babel transform is applied with `react` and `es2015-loose` presets.
65+
Pass loader query `jsx=true`.
5566

5667
```js
5768
// In your webpack config
5869
{
5970
test: /\.svg$/,
60-
loader: 'react-svg?es5=1'
71+
loader: 'react-svg?jsx=1'
6172
}
6273
```
6374

@@ -70,7 +81,6 @@ Note: babel transform is applied with `react` and `es2015-loose` presets.
7081
test: /\.svg$/,
7182
loader: 'react-svg',
7283
query: {
73-
es5: true,
7484
svgo: {
7585
// svgo options
7686
plugins: [{removeTitle: false}],
@@ -258,8 +268,8 @@ in the **SAME directory** as the files
258268

259269
### CLI Options
260270

261-
+ `-5` | `--es5`: Transforms ES2015+JSX output to ES5 using `presets=[es2015-loose, react]`
262-
+ `-0` | `--stdout`: Outputs to STDOUT
271+
+ `--jsx`: Outputs JSX code instead of compiling it to JavaScript using babel-preset-react
272+
+ `--stdout`: Outputs to STDOUT
263273
+ `--svgo <config_file>`: Supports SVGO Config YAML / JSON / JS
264274
+ `--svgo.plugins <...plugins>`: Takes in an array of plugins that need to be enabled
265275
+ `--svgo.plugins.<plugin> <true|false>`: - Enable/Disable the plugin

0 commit comments

Comments
 (0)