Spaces:
Sleeping
Sleeping
File size: 2,544 Bytes
cc651f6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
# @svgr/webpack
[](https://travis-ci.org/gregberge/svgr)
[](https://www.npmjs.com/package/@svgr/webpack)
[](https://github.com/gregberge/svgr/blob/master/LICENSE)
Webpack loader for SVGR.
```
npm install @svgr/webpack --save-dev
```
## Usage
In your `webpack.config.js`:
```js
{
test: /\.svg$/,
use: ['@svgr/webpack'],
}
```
In your code:
```js
import Star from './star.svg'
const App = () => (
<div>
<Star />
</div>
)
```
### Passing options
```js
{
test: /\.svg$/,
use: [
{
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: ['@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>
)
```
The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
### Use your own Babel configuration
By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configuration](https://github.com/gregberge/svgr/blob/master/packages/webpack/src/index.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 },
}
],
}
```
### Handle SVG in CSS, Sass or Less
It is possible to detect the module that requires your SVG using [`Rule.issuer`](https://webpack.js.org/configuration/module/#rule-issuer) in Webpack. Using it you can specify two different configurations for JavaScript and the rest of your files.
```js
[
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
issuer: {
test: /\.jsx?$/
},
use: ['babel-loader', '@svgr/webpack', 'url-loader']
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
},
]
```
## License
MIT
|