UNPKG

3.09 kBMarkdownView Raw
1# @svgr/webpack
2
3[![Build Status](https://img.shields.io/travis/gregberge/svgr.svg)](https://travis-ci.org/gregberge/svgr)
4[![Version](https://img.shields.io/npm/v/@svgr/webpack.svg)](https://www.npmjs.com/package/@svgr/webpack)
5[![MIT License](https://img.shields.io/npm/l/@svgr/webpack.svg)](https://github.com/gregberge/svgr/blob/master/LICENSE)
6
7Webpack loader for SVGR.
8
9```
10npm install @svgr/webpack --save-dev
11```
12
13## Usage
14
15In your `webpack.config.js`:
16
17```js
18{
19 test: /\.svg$/,
20 use: ['@svgr/webpack'],
21}
22```
23
24In your code:
25
26```js
27import Star from './star.svg'
28
29const App = () => (
30 <div>
31 <Star />
32 </div>
33)
34```
35
36### Passing options
37
38```js
39{
40 test: /\.svg$/,
41 use: [
42 {
43 loader: '@svgr/webpack',
44 options: {
45 native: true,
46 },
47 },
48 ],
49}
50```
51
52### Using with `url-loader` or `file-loader`
53
54It 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).
55
56In your `webpack.config.js`:
57
58```js
59{
60 test: /\.svg$/,
61 use: ['@svgr/webpack', 'url-loader'],
62}
63```
64
65In your code:
66
67```js
68import starUrl, { ReactComponent as Star } from './star.svg'
69
70const App = () => (
71 <div>
72 <img src={starUrl} alt="star" />
73 <Star />
74 </div>
75)
76```
77
78The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.
79
80Please 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.
81
82If you prefer named export in any case, you may set the `exportType` option to `named`.
83
84### Use your own Babel configuration
85
86By 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.
87
88```js
89// Example using preact
90{
91 test: /\.svg$/,
92 use: [
93 {
94 loader: 'babel-loader',
95 options: {
96 presets: ['preact', 'env'],
97 },
98 },
99 {
100 loader: '@svgr/webpack',
101 options: { babel: false },
102 }
103 ],
104}
105```
106
107### Handle SVG in CSS, Sass or Less
108
109It 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.
110
111```js
112;[
113 {
114 test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
115 issuer: /\.[jt]sx?$/,
116 use: ['babel-loader', '@svgr/webpack', 'url-loader'],
117 },
118 {
119 test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
120 loader: 'url-loader',
121 },
122]
123```
124
125_[Rule.issuer](https://v4.webpack.js.org/configuration/module/#ruleissuer) in Webpack 4 has additional conditions which are not available in Webpack 5._
126
127## License
128
129MIT