1 | # @svgr/webpack
|
2 |
|
3 | [![Build Status][build-badge]][build]
|
4 | [![version][version-badge]][package]
|
5 | [![MIT License][license-badge]][license]
|
6 |
|
7 | Webpack loader for SVGR.
|
8 |
|
9 | ```
|
10 | npm install @svgr/webpack
|
11 | ```
|
12 |
|
13 | ## Usage
|
14 |
|
15 | In your `webpack.config.js`:
|
16 |
|
17 | ```js
|
18 | {
|
19 | test: /\.svg$/,
|
20 | use: ['@svgr/webpack'],
|
21 | }
|
22 | ```
|
23 |
|
24 | In your code:
|
25 |
|
26 | ```js
|
27 | import Star from './star.svg'
|
28 |
|
29 | const 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 |
|
54 | 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).
|
55 |
|
56 | In your `webpack.config.js`:
|
57 |
|
58 | ```js
|
59 | {
|
60 | test: /\.svg$/,
|
61 | use: ['@svgr/webpack', 'url-loader'],
|
62 | }
|
63 | ```
|
64 |
|
65 | In your code:
|
66 |
|
67 | ```js
|
68 | import starUrl, { ReactComponent as Star } from './star.svg'
|
69 |
|
70 | const App = () => (
|
71 | <div>
|
72 | <img src={starUrl} alt="star" />
|
73 | <Star />
|
74 | </div>
|
75 | )
|
76 | ```
|
77 |
|
78 | ### Use your own Babel configuration
|
79 |
|
80 | By default, `@svgr/webpack` includes a `babel-loader` with [optimized configuration](https://github.com/smooth-code/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.
|
81 |
|
82 | ```js
|
83 | // Example using preact
|
84 | {
|
85 | test: /\.svg$/,
|
86 | use: [
|
87 | {
|
88 | loader: 'babel-loader',
|
89 | options: {
|
90 | presets: ['preact', 'env'],
|
91 | },
|
92 | },
|
93 | {
|
94 | loader: '@svgr/webpack',
|
95 | options: { babel: false },
|
96 | }
|
97 | ],
|
98 | }
|
99 | ```
|
100 |
|
101 | ### Handle SVG in CSS, Sass or Less
|
102 |
|
103 | 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.
|
104 |
|
105 | ```js
|
106 | {
|
107 | {
|
108 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
|
109 | issuer: {
|
110 | test: /\.jsx?$/
|
111 | },
|
112 | use: ['babel-loader', '@svgr/webpack', 'url-loader']
|
113 | },
|
114 | {
|
115 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
|
116 | loader: 'url-loader'
|
117 | },
|
118 | }
|
119 | ```
|
120 |
|
121 | ## License
|
122 |
|
123 | MIT
|
124 |
|
125 | [build-badge]: https://img.shields.io/travis/smooth-code/svgr.svg?style=flat-square
|
126 | [build]: https://travis-ci.org/smooth-code/svgr
|
127 | [version-badge]: https://img.shields.io/npm/v/@svgr/webpack.svg?style=flat-square
|
128 | [package]: https://www.npmjs.com/package/@svgr/webpack
|
129 | [license-badge]: https://img.shields.io/npm/l/@svgr/webpack.svg?style=flat-square
|
130 | [license]: https://github.com/smooth-code/svgr/blob/master/LICENSE
|