Spaces:
Configuration error
Configuration error
File size: 3,092 Bytes
a053984 |
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 127 128 129 130 |
# @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.
Please note that by default, `@svgr/webpack` will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, `@svgr/webpack` will always export the React component via named export.
If you prefer named export in any case, you may set the `exportType` option to `named`.
### Use your own Babel configuration
By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configuration](https://github.com/gregberge/svgr/blob/main/packages/webpack/src/index.ts). 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/#ruleissuer) in Webpack 5. Using it you can specify two different configurations for JavaScript and the rest of your files.
```js
;[
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
issuer: /\.[jt]sx?$/,
use: ['babel-loader', '@svgr/webpack', 'url-loader'],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
},
]
```
_[Rule.issuer](https://v4.webpack.js.org/configuration/module/#ruleissuer) in Webpack 4 has additional conditions which are not available in Webpack 5._
## License
MIT
|