Skip to content

Commit 21b6209

Browse files
authoredMar 24, 2023
feat: upgrade to svgo v3 (#798)
BREAKING CHANGE: svgr now requires Node.js v14+
1 parent ce55cc0 commit 21b6209

File tree

10 files changed

+388
-299
lines changed

10 files changed

+388
-299
lines changed
 

‎package-lock.json

+202-110
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/cli/src/__snapshots__/index.test.ts.snap

+59-59
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export { default as File } from './File'
99
exports[`cli should not override config with cli defaults 1`] = `
1010
"import * as React from 'react'
1111
const SvgFile = () => (
12-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg">
13-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
12+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1}>
13+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
1414
</svg>
1515
)
1616
export default SvgFile
@@ -32,8 +32,8 @@ exports[`cli should support --no-index 1`] = `
3232
exports[`cli should support --prettier-config as file 1`] = `
3333
"import * as React from 'react'
3434
const SvgFile = (props) => (
35-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
36-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
35+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
36+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
3737
</svg>
3838
)
3939
export default SvgFile
@@ -44,8 +44,8 @@ export default SvgFile
4444
exports[`cli should support --prettier-config as json 1`] = `
4545
"import * as React from 'react'
4646
const SvgFile = (props) => (
47-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
48-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
47+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
48+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
4949
</svg>
5050
)
5151
export default SvgFile
@@ -56,9 +56,9 @@ export default SvgFile
5656
exports[`cli should support --svgo-config as file 1`] = `
5757
"import * as React from 'react'
5858
const SvgFile = (props) => (
59-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
59+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
6060
<title>{'Rectangle 5'}</title>
61-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
61+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
6262
</svg>
6363
)
6464
export default SvgFile
@@ -69,9 +69,9 @@ export default SvgFile
6969
exports[`cli should support --svgo-config as json 1`] = `
7070
"import * as React from 'react'
7171
const SvgFile = (props) => (
72-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
72+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
7373
<title>{'Rectangle 5'}</title>
74-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
74+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
7575
</svg>
7676
)
7777
export default SvgFile
@@ -134,8 +134,8 @@ exports[`cli should support different filename cases with directory output: --fi
134134
exports[`cli should support stdin filepath 1`] = `
135135
"import * as React from 'react'
136136
const SvgFile = (props) => (
137-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
138-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
137+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
138+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
139139
</svg>
140140
)
141141
export default SvgFile
@@ -147,14 +147,14 @@ exports[`cli should support various args: --desc-prop 1`] = `
147147
"import * as React from 'react'
148148
const SvgFile = ({ desc, descId, ...props }) => (
149149
<svg
150+
xmlns="http://www.w3.org/2000/svg"
150151
width={48}
151152
height={1}
152-
xmlns="http://www.w3.org/2000/svg"
153153
aria-describedby={descId}
154154
{...props}
155155
>
156156
{desc ? <desc id={descId}>{desc}</desc> : null}
157-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
157+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
158158
</svg>
159159
)
160160
export default SvgFile
@@ -165,8 +165,8 @@ export default SvgFile
165165
exports[`cli should support various args: --expand-props none 1`] = `
166166
"import * as React from 'react'
167167
const SvgFile = () => (
168-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg">
169-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
168+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1}>
169+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
170170
</svg>
171171
)
172172
export default SvgFile
@@ -177,8 +177,8 @@ export default SvgFile
177177
exports[`cli should support various args: --expand-props start 1`] = `
178178
"import * as React from 'react'
179179
const SvgFile = (props) => (
180-
<svg {...props} width={48} height={1} xmlns="http://www.w3.org/2000/svg">
181-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
180+
<svg {...props} xmlns="http://www.w3.org/2000/svg" width={48} height={1}>
181+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
182182
</svg>
183183
)
184184
export default SvgFile
@@ -190,13 +190,13 @@ exports[`cli should support various args: --icon 1`] = `
190190
"import * as React from 'react'
191191
const SvgFile = (props) => (
192192
<svg
193+
xmlns="http://www.w3.org/2000/svg"
193194
width="1em"
194195
height="1em"
195196
viewBox="0 0 48 1"
196-
xmlns="http://www.w3.org/2000/svg"
197197
{...props}
198198
>
199-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
199+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
200200
</svg>
201201
)
202202
export default SvgFile
@@ -208,13 +208,13 @@ exports[`cli should support various args: --icon 2em 1`] = `
208208
"import * as React from 'react'
209209
const SvgFile = (props) => (
210210
<svg
211+
xmlns="http://www.w3.org/2000/svg"
211212
width="2em"
212213
height="2em"
213214
viewBox="0 0 48 1"
214-
xmlns="http://www.w3.org/2000/svg"
215215
{...props}
216216
>
217-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
217+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
218218
</svg>
219219
)
220220
export default SvgFile
@@ -226,13 +226,13 @@ exports[`cli should support various args: --icon 24 1`] = `
226226
"import * as React from 'react'
227227
const SvgFile = (props) => (
228228
<svg
229+
xmlns="http://www.w3.org/2000/svg"
229230
width={24}
230231
height={24}
231232
viewBox="0 0 48 1"
232-
xmlns="http://www.w3.org/2000/svg"
233233
{...props}
234234
>
235-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
235+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
236236
</svg>
237237
)
238238
export default SvgFile
@@ -242,8 +242,8 @@ export default SvgFile
242242

243243
exports[`cli should support various args: --jsx-runtime automatic 1`] = `
244244
"const SvgFile = (props) => (
245-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
246-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
245+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
246+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
247247
</svg>
248248
)
249249
export default SvgFile
@@ -254,8 +254,8 @@ export default SvgFile
254254
exports[`cli should support various args: --jsx-runtime classic-preact 1`] = `
255255
"import { h } from 'preact'
256256
const SvgFile = (props) => (
257-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
258-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
257+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
258+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
259259
</svg>
260260
)
261261
export default SvgFile
@@ -267,8 +267,8 @@ exports[`cli should support various args: --native --expand-props none 1`] = `
267267
"import * as React from 'react'
268268
import Svg, { Path } from 'react-native-svg'
269269
const SvgFile = () => (
270-
<Svg width={48} height={1} xmlns="http://www.w3.org/2000/svg">
271-
<Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
270+
<Svg xmlns="http://www.w3.org/2000/svg" width={48} height={1}>
271+
<Path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
272272
</Svg>
273273
)
274274
export default SvgFile
@@ -281,13 +281,13 @@ exports[`cli should support various args: --native --icon 1`] = `
281281
import Svg, { Path } from 'react-native-svg'
282282
const SvgFile = (props) => (
283283
<Svg
284+
xmlns="http://www.w3.org/2000/svg"
284285
width={24}
285286
height={24}
286287
viewBox="0 0 48 1"
287-
xmlns="http://www.w3.org/2000/svg"
288288
{...props}
289289
>
290-
<Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
290+
<Path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
291291
</Svg>
292292
)
293293
export default SvgFile
@@ -301,13 +301,13 @@ import Svg, { Path } from 'react-native-svg'
301301
import { forwardRef } from 'react'
302302
const SvgFile = (props, ref) => (
303303
<Svg
304+
xmlns="http://www.w3.org/2000/svg"
304305
width={48}
305306
height={1}
306-
xmlns="http://www.w3.org/2000/svg"
307307
ref={ref}
308308
{...props}
309309
>
310-
<Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
310+
<Path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
311311
</Svg>
312312
)
313313
const ForwardRef = forwardRef(SvgFile)
@@ -320,8 +320,8 @@ exports[`cli should support various args: --native 1`] = `
320320
"import * as React from 'react'
321321
import Svg, { Path } from 'react-native-svg'
322322
const SvgFile = (props) => (
323-
<Svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
324-
<Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
323+
<Svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
324+
<Path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
325325
</Svg>
326326
)
327327
export default SvgFile
@@ -332,8 +332,8 @@ export default SvgFile
332332
exports[`cli should support various args: --no-dimensions 1`] = `
333333
"import * as React from 'react'
334334
const SvgFile = (props) => (
335-
<svg viewBox="0 0 48 1" xmlns="http://www.w3.org/2000/svg" {...props}>
336-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
335+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 1" {...props}>
336+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
337337
</svg>
338338
)
339339
export default SvgFile
@@ -343,7 +343,7 @@ export default SvgFile
343343

344344
exports[`cli should support various args: --no-prettier 1`] = `
345345
"import * as React from "react";
346-
const SvgFile = props => <svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}><path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" /></svg>;
346+
const SvgFile = props => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}><path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" /></svg>;
347347
export default SvgFile;
348348
"
349349
`;
@@ -391,13 +391,13 @@ exports[`cli should support various args: --ref 1`] = `
391391
import { forwardRef } from 'react'
392392
const SvgFile = (props, ref) => (
393393
<svg
394+
xmlns="http://www.w3.org/2000/svg"
394395
width={48}
395396
height={1}
396-
xmlns="http://www.w3.org/2000/svg"
397397
ref={ref}
398398
{...props}
399399
>
400-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
400+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
401401
</svg>
402402
)
403403
const ForwardRef = forwardRef(SvgFile)
@@ -409,8 +409,8 @@ export default ForwardRef
409409
exports[`cli should support various args: --replace-attr-values "#063855=currentColor" 1`] = `
410410
"import * as React from 'react'
411411
const SvgFile = (props) => (
412-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
413-
<path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
412+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
413+
<path fill="currentColor" fillRule="evenodd" d="M0 0h48v1H0z" />
414414
</svg>
415415
)
416416
export default SvgFile
@@ -422,14 +422,14 @@ exports[`cli should support various args: --svg-props "hidden={true},id=hello" 1
422422
"import * as React from 'react'
423423
const SvgFile = (props) => (
424424
<svg
425+
xmlns="http://www.w3.org/2000/svg"
425426
width={48}
426427
height={1}
427-
xmlns="http://www.w3.org/2000/svg"
428428
hidden={true}
429429
id="hello"
430430
{...props}
431431
>
432-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
432+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
433433
</svg>
434434
)
435435
export default SvgFile
@@ -441,14 +441,14 @@ exports[`cli should support various args: --title-prop 1`] = `
441441
"import * as React from 'react'
442442
const SvgFile = ({ title, titleId, ...props }) => (
443443
<svg
444+
xmlns="http://www.w3.org/2000/svg"
444445
width={48}
445446
height={1}
446-
xmlns="http://www.w3.org/2000/svg"
447447
aria-labelledby={titleId}
448448
{...props}
449449
>
450450
{title ? <title id={titleId}>{title}</title> : null}
451-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
451+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
452452
</svg>
453453
)
454454
export default SvgFile
@@ -468,15 +468,15 @@ const SvgFile = (
468468
ref: Ref<SVGSVGElement>,
469469
) => (
470470
<svg
471+
xmlns="http://www.w3.org/2000/svg"
471472
width={48}
472473
height={1}
473-
xmlns="http://www.w3.org/2000/svg"
474474
ref={ref}
475475
aria-describedby={descId}
476476
{...props}
477477
>
478478
{desc ? <desc id={descId}>{desc}</desc> : null}
479-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
479+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
480480
</svg>
481481
)
482482
const ForwardRef = forwardRef(SvgFile)
@@ -497,15 +497,15 @@ const SvgFile = (
497497
ref: Ref<SVGSVGElement>,
498498
) => (
499499
<svg
500+
xmlns="http://www.w3.org/2000/svg"
500501
width={48}
501502
height={1}
502-
xmlns="http://www.w3.org/2000/svg"
503503
ref={ref}
504504
aria-labelledby={titleId}
505505
{...props}
506506
>
507507
{title ? <title id={titleId}>{title}</title> : null}
508-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
508+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
509509
</svg>
510510
)
511511
const ForwardRef = forwardRef(SvgFile)
@@ -519,13 +519,13 @@ exports[`cli should support various args: --typescript --ref 1`] = `
519519
import { SVGProps, Ref, forwardRef } from 'react'
520520
const SvgFile = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
521521
<svg
522+
xmlns="http://www.w3.org/2000/svg"
522523
width={48}
523524
height={1}
524-
xmlns="http://www.w3.org/2000/svg"
525525
ref={ref}
526526
{...props}
527527
>
528-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
528+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
529529
</svg>
530530
)
531531
const ForwardRef = forwardRef(SvgFile)
@@ -538,8 +538,8 @@ exports[`cli should support various args: --typescript 1`] = `
538538
"import * as React from 'react'
539539
import { SVGProps } from 'react'
540540
const SvgFile = (props: SVGProps<SVGSVGElement>) => (
541-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
542-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
541+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
542+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
543543
</svg>
544544
)
545545
export default SvgFile
@@ -590,8 +590,8 @@ __fixtures__/withsvgrrc/file.svg -> __fixtures_build__/whole/withsvgrrc/file.tsx
590590
exports[`cli should work with a simple file 1`] = `
591591
"import * as React from 'react'
592592
const SvgFile = (props) => (
593-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
594-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
593+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
594+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
595595
</svg>
596596
)
597597
export default SvgFile
@@ -602,8 +602,8 @@ export default SvgFile
602602
exports[`cli should work with stdin 1`] = `
603603
"import * as React from 'react'
604604
const SvgComponent = (props) => (
605-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
606-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
605+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
606+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
607607
</svg>
608608
)
609609
export default SvgComponent

‎packages/cli/src/__snapshots__/util.test.ts.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
exports[`util #convertFile should convert a file 1`] = `
44
"import * as React from 'react'
55
const SvgFile = (props) => (
6-
<svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
7-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
6+
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
7+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
88
</svg>
99
)
1010
export default SvgFile
@@ -15,13 +15,13 @@ exports[`util #convertFile should support a custom config path 1`] = `
1515
"import * as React from 'react'
1616
const SvgFile = (props) => (
1717
<svg
18+
xmlns="http://www.w3.org/2000/svg"
1819
width="1em"
1920
height="1em"
2021
viewBox="0 0 48 1"
21-
xmlns="http://www.w3.org/2000/svg"
2222
{...props}
2323
>
24-
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
24+
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
2525
</svg>
2626
)
2727
export default SvgFile

‎packages/core/package.json

-3
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,5 @@
4343
"@svgr/plugin-jsx": "^6.5.1",
4444
"camelcase": "^6.2.0",
4545
"cosmiconfig": "^7.0.1"
46-
},
47-
"devDependencies": {
48-
"@types/svgo": "^2.6.4"
4946
}
5047
}

‎packages/core/src/__snapshots__/transform.test.ts.snap

+81-81
Large diffs are not rendered by default.

‎packages/core/src/config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { cosmiconfig, cosmiconfigSync } from 'cosmiconfig'
22
import type { Options as PrettierOptions } from 'prettier'
3-
import type { OptimizeOptions as SvgoOptions } from 'svgo'
3+
import type { Config as SvgoConfig } from 'svgo'
44
import type { Options as TransformOptions } from '@svgr/babel-preset'
55
import type { TransformOptions as BabelTransformOptions } from '@babel/core'
66
import type { ConfigPlugin } from './plugins'
@@ -25,7 +25,7 @@ export interface Config {
2525
prettier?: boolean
2626
prettierConfig?: PrettierOptions
2727
svgo?: boolean
28-
svgoConfig?: SvgoOptions
28+
svgoConfig?: SvgoConfig
2929
configFile?: string
3030
template?: TransformOptions['template']
3131
memo?: boolean

‎packages/plugin-svgo/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,6 @@
3939
"dependencies": {
4040
"cosmiconfig": "^7.0.1",
4141
"deepmerge": "^4.2.2",
42-
"svgo": "^2.8.0"
42+
"svgo": "^3.0.2"
4343
}
4444
}
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`svgo does not load runtime configuration with \`runtimeConfig: false\` 1`] = `"<svg width="88" height="88" xmlns="http://www.w3.org/2000/svg"><style>.svgo__shape{fill:red}</style><g id="svgo__Blocks" class="svgo__blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="svgo__Dismiss" stroke="#063855" stroke-width="2"><path d="M51 37 37 51" id="svgo__Shape" class="svgo__shape"/><path d="M51 51 37 37" class="svgo__shape"/></g></g></svg>"`;
3+
exports[`svgo does not load runtime configuration with \`runtimeConfig: false\` 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88"><style>.svgo__shape{fill:red}</style><g id="svgo__Blocks" fill="none" fill-rule="evenodd" stroke="none" stroke-linecap="square" stroke-width="1" class="svgo__blocks"><g id="svgo__Dismiss" stroke="#063855" stroke-width="2"><path id="svgo__Shape" d="M51 37 37 51" class="svgo__shape"/><path d="M51 51 37 37" class="svgo__shape"/></g></g></svg>"`;
44

5-
exports[`svgo does not remove viewBox with \`icon\` option 1`] = `"<svg width="88" height="88" viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg"><style>.prefix__shape{fill:red}</style><g id="prefix__Blocks" class="prefix__blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="prefix__Dismiss" stroke="#063855" stroke-width="2"><path d="M51 37 37 51" id="prefix__Shape" class="prefix__shape"/><path d="M51 51 37 37" class="prefix__shape"/></g></g></svg>"`;
5+
exports[`svgo does not remove viewBox with \`icon\` option 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88" viewBox="0 0 88 88"><style>.prefix__shape{fill:red}</style><g id="prefix__Blocks" fill="none" fill-rule="evenodd" stroke="none" stroke-linecap="square" stroke-width="1" class="prefix__blocks"><g id="prefix__Dismiss" stroke="#063855" stroke-width="2"><path id="prefix__Shape" d="M51 37 37 51" class="prefix__shape"/><path d="M51 51 37 37" class="prefix__shape"/></g></g></svg>"`;
66

7-
exports[`svgo does not remove viewBox with when \`dimensions\` is false 1`] = `"<svg width="88" height="88" viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg"><style>.prefix__shape{fill:red}</style><g id="prefix__Blocks" class="prefix__blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="prefix__Dismiss" stroke="#063855" stroke-width="2"><path d="M51 37 37 51" id="prefix__Shape" class="prefix__shape"/><path d="M51 51 37 37" class="prefix__shape"/></g></g></svg>"`;
7+
exports[`svgo does not remove viewBox with when \`dimensions\` is false 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88" viewBox="0 0 88 88"><style>.prefix__shape{fill:red}</style><g id="prefix__Blocks" fill="none" fill-rule="evenodd" stroke="none" stroke-linecap="square" stroke-width="1" class="prefix__blocks"><g id="prefix__Dismiss" stroke="#063855" stroke-width="2"><path id="prefix__Shape" d="M51 37 37 51" class="prefix__shape"/><path d="M51 51 37 37" class="prefix__shape"/></g></g></svg>"`;
88

9-
exports[`svgo does remove style when \`native\` is true 1`] = `"<svg width="88" height="88" xmlns="http://www.w3.org/2000/svg"><g stroke="#063855" stroke-width="2" class="prefix__blocks" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M51 37 37 51M51 51 37 37" style="fill:red"/></g></svg>"`;
9+
exports[`svgo does remove style when \`native\` is true 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88"><g fill="none" fill-rule="evenodd" stroke="#063855" stroke-linecap="square" stroke-width="2" class="prefix__blocks"><path d="M51 37 37 51M51 51 37 37" style="fill:red"/></g></svg>"`;
1010

11-
exports[`svgo optimizes svg 1`] = `"<svg width="88" height="88" xmlns="http://www.w3.org/2000/svg"><style>.prefix__shape{fill:red}</style><g id="prefix__Blocks" class="prefix__blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="prefix__Dismiss" stroke="#063855" stroke-width="2"><path d="M51 37 37 51" id="prefix__Shape" class="prefix__shape"/><path d="M51 51 37 37" class="prefix__shape"/></g></g></svg>"`;
11+
exports[`svgo optimizes svg 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88"><style>.prefix__shape{fill:red}</style><g id="prefix__Blocks" fill="none" fill-rule="evenodd" stroke="none" stroke-linecap="square" stroke-width="1" class="prefix__blocks"><g id="prefix__Dismiss" stroke="#063855" stroke-width="2"><path id="prefix__Shape" d="M51 37 37 51" class="prefix__shape"/><path d="M51 51 37 37" class="prefix__shape"/></g></g></svg>"`;
1212

13-
exports[`svgo supports \`config.svgoConfig\` 1`] = `"<svg width="88" height="88" xmlns="http://www.w3.org/2000/svg"><desc>Created with Sketch.</desc><style>.shape{fill:red}</style><g id="Blocks" class="blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="Dismiss" stroke="#063855" stroke-width="2"><path d="M51 37 37 51" id="Shape" class="shape"/><path d="M51 51 37 37" class="shape"/></g></g></svg>"`;
13+
exports[`svgo supports \`config.svgoConfig\` 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88"><desc>Created with Sketch.</desc><style>.shape{fill:red}</style><g id="Blocks" fill="none" fill-rule="evenodd" stroke="none" stroke-linecap="square" stroke-width="1" class="blocks"><g id="Dismiss" stroke="#063855" stroke-width="2"><path id="Shape" d="M51 37 37 51" class="shape"/><path d="M51 51 37 37" class="shape"/></g></g></svg>"`;
1414

15-
exports[`svgo uses \`state.filePath\` to detect configuration 1`] = `"<svg width="88" height="88" xmlns="http://www.w3.org/2000/svg"><style>.svgo__shape{fill:red}</style><g id="svgo__Blocks" class="svgo__blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="svgo__Dismiss" stroke="#063855" stroke-width="2"><path d="M51 37 37 51" id="svgo__Shape" class="svgo__shape"/><path d="M51 51 37 37" class="svgo__shape"/></g></g></svg>"`;
15+
exports[`svgo uses \`state.filePath\` to detect configuration 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88"><style>.svgo__shape{fill:red}</style><g id="svgo__Blocks" fill="none" fill-rule="evenodd" stroke="none" stroke-linecap="square" stroke-width="1" class="svgo__blocks"><g id="svgo__Dismiss" stroke="#063855" stroke-width="2"><path id="svgo__Shape" d="M51 37 37 51" class="svgo__shape"/><path d="M51 51 37 37" class="svgo__shape"/></g></g></svg>"`;

‎packages/rollup/src/__snapshots__/index.test.ts.snap

+7-7
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
66
import * as React from "react";
77
var SvgFile = function SvgFile(props) {
88
return /*#__PURE__*/React.createElement("svg", _extends({
9+
xmlns: "http://www.w3.org/2000/svg",
910
width: 48,
10-
height: 1,
11-
xmlns: "http://www.w3.org/2000/svg"
11+
height: 1
1212
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
13-
d: "M0 0h48v1H0z",
1413
fill: "#063855",
15-
fillRule: "evenodd"
14+
fillRule: "evenodd",
15+
d: "M0 0h48v1H0z"
1616
})));
1717
};
1818
export default SvgFile;"
1919
`;
2020

2121
exports[`rollup loader should convert file with previousExport of image plugin 1`] = `
2222
"import * as React from "react";
23-
const SvgFile = props => <svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}><path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" /></svg>;
23+
const SvgFile = props => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}><path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" /></svg>;
2424
export { SvgFile as ReactComponent };
2525
var img = new Image();
2626
img.src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSIxcHgiIHZpZXdCb3g9IjAgMCA0OCAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+UmVjdGFuZ2xlIDU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMTktU2VwYXJhdG9yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI5LjAwMDAwMCwgLTE1Ni4wMDAwMDApIiBmaWxsPSIjMDYzODU1Ij4KICAgICAgICAgICAgPGcgaWQ9IkNvbnRyb2xzL1NldHRpbmdzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MC4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDY0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQuMDAwMDAwLCA1Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01IiB4PSIyNSIgeT0iMzYiIHdpZHRoPSI0OCIgaGVpZ2h0PSIxIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=';
@@ -29,13 +29,13 @@ export default img;"
2929

3030
exports[`rollup loader should convert file with previousExport of url plugin 1`] = `
3131
"import * as React from "react";
32-
const SvgFile = props => <svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}><path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" /></svg>;
32+
const SvgFile = props => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}><path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" /></svg>;
3333
export { SvgFile as ReactComponent };
3434
export default "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2248px%22%20height%3D%221px%22%20viewBox%3D%220%200%2048%201%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%20%20%20%20%3Ctitle%3ERectangle%205%3C%2Ftitle%3E%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%2219-Separator%22%20transform%3D%22translate%28-129.000000%2C%20-156.000000%29%22%20fill%3D%22%23063855%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Controls%2FSettings%22%20transform%3D%22translate%2880.000000%2C%200.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Content%22%20transform%3D%22translate%280.000000%2C%2064.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%2824.000000%2C%2056.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-5%22%20x%3D%2225%22%20y%3D%2236%22%20width%3D%2248%22%20height%3D%221%22%3E%3C%2Frect%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";"
3535
`;
3636

3737
exports[`rollup loader should convert file without babel 1`] = `
3838
"import * as React from "react";
39-
const SvgFile = props => <svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}><path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" /></svg>;
39+
const SvgFile = props => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}><path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" /></svg>;
4040
export default SvgFile;"
4141
`;

‎packages/webpack/src/__snapshots__/index.test.ts.snap

+25-25
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ exports[`webpack loader supports url-loader 1`] = `
55
import * as React from "react";
66
var SvgIcon = function SvgIcon() {
77
return _svg || (_svg = /*#__PURE__*/React.createElement("svg", {
8+
xmlns: "http://www.w3.org/2000/svg",
89
width: 88,
9-
height: 88,
10-
xmlns: "http://www.w3.org/2000/svg"
10+
height: 88
1111
}, /*#__PURE__*/React.createElement("g", {
12-
stroke: "#063855",
13-
strokeWidth: 2,
1412
fill: "none",
1513
fillRule: "evenodd",
16-
strokeLinecap: "square"
14+
stroke: "#063855",
15+
strokeLinecap: "square",
16+
strokeWidth: 2
1717
}, /*#__PURE__*/React.createElement("path", {
1818
d: "M51 37 37 51M51 51 37 37"
1919
}))));
@@ -25,15 +25,15 @@ export default "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz
2525
exports[`webpack loader transforms file (babel: false) 1`] = `
2626
"import * as React from "react";
2727
const SvgIcon = () => /*#__PURE__*/React.createElement("svg", {
28+
xmlns: "http://www.w3.org/2000/svg",
2829
width: 88,
29-
height: 88,
30-
xmlns: "http://www.w3.org/2000/svg"
30+
height: 88
3131
}, /*#__PURE__*/React.createElement("g", {
32-
stroke: "#063855",
33-
strokeWidth: 2,
3432
fill: "none",
3533
fillRule: "evenodd",
36-
strokeLinecap: "square"
34+
stroke: "#063855",
35+
strokeLinecap: "square",
36+
strokeWidth: 2
3737
}, /*#__PURE__*/React.createElement("path", {
3838
d: "M51 37 37 51M51 51 37 37"
3939
})));
@@ -46,15 +46,15 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
4646
import * as React from "react";
4747
var SvgIcon = function SvgIcon(props) {
4848
return /*#__PURE__*/React.createElement("svg", _extends({
49+
xmlns: "http://www.w3.org/2000/svg",
4950
width: 88,
50-
height: 88,
51-
xmlns: "http://www.w3.org/2000/svg"
51+
height: 88
5252
}, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
53-
stroke: "#063855",
54-
strokeWidth: 2,
5553
fill: "none",
5654
fillRule: "evenodd",
57-
strokeLinecap: "square"
55+
stroke: "#063855",
56+
strokeLinecap: "square",
57+
strokeWidth: 2
5858
}, /*#__PURE__*/React.createElement("path", {
5959
d: "M51 37 37 51M51 51 37 37"
6060
}))));
@@ -67,15 +67,15 @@ exports[`webpack loader transforms file 1`] = `
6767
import * as React from "react";
6868
var SvgIcon = function SvgIcon() {
6969
return _svg || (_svg = /*#__PURE__*/React.createElement("svg", {
70+
xmlns: "http://www.w3.org/2000/svg",
7071
width: 88,
71-
height: 88,
72-
xmlns: "http://www.w3.org/2000/svg"
72+
height: 88
7373
}, /*#__PURE__*/React.createElement("g", {
74-
stroke: "#063855",
75-
strokeWidth: 2,
7674
fill: "none",
7775
fillRule: "evenodd",
78-
strokeLinecap: "square"
76+
stroke: "#063855",
77+
strokeLinecap: "square",
78+
strokeWidth: 2
7979
}, /*#__PURE__*/React.createElement("path", {
8080
d: "M51 37 37 51M51 51 37 37"
8181
}))));
@@ -88,15 +88,15 @@ exports[`webpack loader transforms file 2`] = `
8888
import * as React from "react";
8989
var SvgIcon = function SvgIcon() {
9090
return _svg || (_svg = /*#__PURE__*/React.createElement("svg", {
91+
xmlns: "http://www.w3.org/2000/svg",
9192
width: 88,
92-
height: 88,
93-
xmlns: "http://www.w3.org/2000/svg"
93+
height: 88
9494
}, /*#__PURE__*/React.createElement("g", {
95-
stroke: "#063855",
96-
strokeWidth: 2,
9795
fill: "none",
9896
fillRule: "evenodd",
99-
strokeLinecap: "square"
97+
stroke: "#063855",
98+
strokeLinecap: "square",
99+
strokeWidth: 2
100100
}, /*#__PURE__*/React.createElement("path", {
101101
d: "M51 37 37 51M51 51 37 37"
102102
}))));

1 commit comments

Comments
 (1)

vercel[bot] commented on Mar 24, 2023

@vercel[bot]

Successfully deployed to the following URLs:

svgr – ./

svgr-git-main-gregberge.vercel.app
svgr-gregberge.vercel.app
api.react-svgr.com

Please sign in to comment.