You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
2.5 KiB
125 lines
2.5 KiB
# @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
|
|
|