Skip to content

Commit 00e84ea

Browse files
MichaelGrubenMichaelGrubenEmp
MichaelGruben
and
MichaelGrubenEmp
authored
fix: prevent removing the namespace by svgr ([#475](#475) (#498)
Co-authored-by: Michael Gruben <michael.gruben@empiriecom.com>
1 parent 9fb0af5 commit 00e84ea

File tree

8 files changed

+182
-60
lines changed

8 files changed

+182
-60
lines changed

‎packages/babel-preset/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function replaceMapToValues(replaceMap) {
2828
}
2929

3030
const plugin = (api, opts) => {
31-
let toRemoveAttributes = ['xmlns', 'xmlnsXlink', 'version']
31+
let toRemoveAttributes = ['version']
3232
let toAddAttributes = []
3333

3434
if (opts.svgProps) {

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

Lines changed: 85 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`cli should not override config with cli defaults 1`] = `
99
"import * as React from \\"react\\";
1010
1111
function SvgFile() {
12-
return <svg viewBox=\\"0 0 48 1\\"><title>{\\"Rectangle 5\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Page-1\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\"><g id=\\"19-Separator\\" transform=\\"translate(-129.000000, -156.000000)\\" fill=\\"#063855\\"><g id=\\"Controls/Settings\\" transform=\\"translate(80.000000, 0.000000)\\"><g id=\\"Content\\" transform=\\"translate(0.000000, 64.000000)\\"><g id=\\"Group\\" transform=\\"translate(24.000000, 56.000000)\\"><g id=\\"Group-2\\"><rect id=\\"Rectangle-5\\" x={25} y={36} width={48} height={1} /></g></g></g></g></g></g></svg>;
12+
return <svg viewBox=\\"0 0 48 1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><title>{\\"Rectangle 5\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Page-1\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\"><g id=\\"19-Separator\\" transform=\\"translate(-129.000000, -156.000000)\\" fill=\\"#063855\\"><g id=\\"Controls/Settings\\" transform=\\"translate(80.000000, 0.000000)\\"><g id=\\"Content\\" transform=\\"translate(0.000000, 64.000000)\\"><g id=\\"Group\\" transform=\\"translate(24.000000, 56.000000)\\"><g id=\\"Group-2\\"><rect id=\\"Rectangle-5\\" x={25} y={36} width={48} height={1} /></g></g></g></g></g></g></svg>;
1313
}
1414
1515
export default SvgFile;
@@ -23,7 +23,12 @@ exports[`cli should support --prettier-config as file 1`] = `
2323
2424
function SvgFile(props) {
2525
return (
26-
<svg width={48} height={1} {...props}>
26+
<svg
27+
width={48}
28+
height={1}
29+
xmlns=\\"http://www.w3.org/2000/svg\\"
30+
{...props}
31+
>
2732
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
2833
</svg>
2934
)
@@ -39,7 +44,12 @@ exports[`cli should support --prettier-config as json 1`] = `
3944
4045
function SvgFile(props) {
4146
return (
42-
<svg width={48} height={1} {...props}>
47+
<svg
48+
width={48}
49+
height={1}
50+
xmlns=\\"http://www.w3.org/2000/svg\\"
51+
{...props}
52+
>
4353
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
4454
</svg>
4555
)
@@ -55,7 +65,7 @@ exports[`cli should support --svgo-config as file 1`] = `
5565
5666
function SvgFile(props) {
5767
return (
58-
<svg width={48} height={1} {...props}>
68+
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
5969
<title>{'Rectangle 5'}</title>
6070
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
6171
</svg>
@@ -72,7 +82,7 @@ exports[`cli should support --svgo-config as json 1`] = `
7282
7383
function SvgFile(props) {
7484
return (
75-
<svg width={48} height={1} {...props}>
85+
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
7686
<title>{'Rectangle 5'}</title>
7787
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
7888
</svg>
@@ -138,7 +148,7 @@ exports[`cli should support stdin filepath 1`] = `
138148
139149
function SvgFile(props) {
140150
return (
141-
<svg width={48} height={1} {...props}>
151+
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
142152
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
143153
</svg>
144154
)
@@ -154,7 +164,7 @@ exports[`cli should support various args: --expand-props none 1`] = `
154164
155165
function SvgFile() {
156166
return (
157-
<svg width={48} height={1}>
167+
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
158168
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
159169
</svg>
160170
)
@@ -170,7 +180,7 @@ exports[`cli should support various args: --expand-props start 1`] = `
170180
171181
function SvgFile(props) {
172182
return (
173-
<svg {...props} width={48} height={1}>
183+
<svg {...props} width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
174184
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
175185
</svg>
176186
)
@@ -186,7 +196,13 @@ exports[`cli should support various args: --icon 1`] = `
186196
187197
function SvgFile(props) {
188198
return (
189-
<svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 48 1\\" {...props}>
199+
<svg
200+
width=\\"1em\\"
201+
height=\\"1em\\"
202+
viewBox=\\"0 0 48 1\\"
203+
xmlns=\\"http://www.w3.org/2000/svg\\"
204+
{...props}
205+
>
190206
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
191207
</svg>
192208
)
@@ -203,7 +219,7 @@ import Svg, { Path } from 'react-native-svg'
203219
204220
function SvgFile() {
205221
return (
206-
<Svg width={48} height={1}>
222+
<Svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
207223
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
208224
</Svg>
209225
)
@@ -220,7 +236,13 @@ import Svg, { Path } from 'react-native-svg'
220236
221237
function SvgFile(props) {
222238
return (
223-
<Svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 48 1\\" {...props}>
239+
<Svg
240+
width=\\"1em\\"
241+
height=\\"1em\\"
242+
viewBox=\\"0 0 48 1\\"
243+
xmlns=\\"http://www.w3.org/2000/svg\\"
244+
{...props}
245+
>
224246
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
225247
</Svg>
226248
)
@@ -237,7 +259,13 @@ import Svg, { Path } from 'react-native-svg'
237259
238260
function SvgFile(props, svgRef) {
239261
return (
240-
<Svg width={48} height={1} ref={svgRef} {...props}>
262+
<Svg
263+
width={48}
264+
height={1}
265+
xmlns=\\"http://www.w3.org/2000/svg\\"
266+
ref={svgRef}
267+
{...props}
268+
>
241269
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
242270
</Svg>
243271
)
@@ -255,7 +283,7 @@ import Svg, { Path } from 'react-native-svg'
255283
256284
function SvgFile(props) {
257285
return (
258-
<Svg width={48} height={1} {...props}>
286+
<Svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
259287
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
260288
</Svg>
261289
)
@@ -271,7 +299,7 @@ exports[`cli should support various args: --no-dimensions 1`] = `
271299
272300
function SvgFile(props) {
273301
return (
274-
<svg viewBox=\\"0 0 48 1\\" {...props}>
302+
<svg viewBox=\\"0 0 48 1\\" xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
275303
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
276304
</svg>
277305
)
@@ -286,7 +314,7 @@ exports[`cli should support various args: --no-prettier 1`] = `
286314
"import * as React from \\"react\\";
287315
288316
function SvgFile(props) {
289-
return <svg width={48} height={1} {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
317+
return <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
290318
}
291319
292320
export default SvgFile;
@@ -298,7 +326,14 @@ exports[`cli should support various args: --no-svgo 1`] = `
298326
299327
function SvgFile(props) {
300328
return (
301-
<svg width=\\"48px\\" height=\\"1px\\" viewBox=\\"0 0 48 1\\" {...props}>
329+
<svg
330+
width=\\"48px\\"
331+
height=\\"1px\\"
332+
viewBox=\\"0 0 48 1\\"
333+
xmlns=\\"http://www.w3.org/2000/svg\\"
334+
xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
335+
{...props}
336+
>
302337
<title>{'Rectangle 5'}</title>
303338
<desc>{'Created with Sketch.'}</desc>
304339
<defs />
@@ -339,7 +374,13 @@ exports[`cli should support various args: --ref 1`] = `
339374
340375
function SvgFile(props, svgRef) {
341376
return (
342-
<svg width={48} height={1} ref={svgRef} {...props}>
377+
<svg
378+
width={48}
379+
height={1}
380+
xmlns=\\"http://www.w3.org/2000/svg\\"
381+
ref={svgRef}
382+
{...props}
383+
>
343384
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
344385
</svg>
345386
)
@@ -356,7 +397,7 @@ exports[`cli should support various args: --replace-attr-values "#063855=current
356397
357398
function SvgFile(props) {
358399
return (
359-
<svg width={48} height={1} {...props}>
400+
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
360401
<path d=\\"M0 0h48v1H0z\\" fill=\\"currentColor\\" fillRule=\\"evenodd\\" />
361402
</svg>
362403
)
@@ -372,7 +413,14 @@ exports[`cli should support various args: --svg-props "hidden={true},id=hello" 1
372413
373414
function SvgFile(props) {
374415
return (
375-
<svg width={48} height={1} hidden={true} id=\\"hello\\" {...props}>
416+
<svg
417+
width={48}
418+
height={1}
419+
xmlns=\\"http://www.w3.org/2000/svg\\"
420+
hidden={true}
421+
id=\\"hello\\"
422+
{...props}
423+
>
376424
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
377425
</svg>
378426
)
@@ -388,7 +436,13 @@ exports[`cli should support various args: --title-prop 1`] = `
388436
389437
function SvgFile({ title, titleId, ...props }) {
390438
return (
391-
<svg width={48} height={1} aria-labelledby={titleId} {...props}>
439+
<svg
440+
width={48}
441+
height={1}
442+
xmlns=\\"http://www.w3.org/2000/svg\\"
443+
aria-labelledby={titleId}
444+
{...props}
445+
>
392446
{title ? <title id={titleId}>{title}</title> : null}
393447
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
394448
</svg>
@@ -415,6 +469,7 @@ function SvgFile(
415469
<svg
416470
width={48}
417471
height={1}
472+
xmlns=\\"http://www.w3.org/2000/svg\\"
418473
ref={svgRef}
419474
aria-labelledby={titleId}
420475
{...props}
@@ -439,7 +494,13 @@ function SvgFile(
439494
svgRef?: React.Ref<SVGSVGElement>,
440495
) {
441496
return (
442-
<svg width={48} height={1} ref={svgRef} {...props}>
497+
<svg
498+
width={48}
499+
height={1}
500+
xmlns=\\"http://www.w3.org/2000/svg\\"
501+
ref={svgRef}
502+
{...props}
503+
>
443504
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
444505
</svg>
445506
)
@@ -456,7 +517,7 @@ exports[`cli should support various args: --typescript 1`] = `
456517
457518
function SvgFile(props: React.SVGProps<SVGSVGElement>) {
458519
return (
459-
<svg width={48} height={1} {...props}>
520+
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
460521
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
461522
</svg>
462523
)
@@ -512,7 +573,7 @@ exports[`cli should work with a simple file 1`] = `
512573
513574
function SvgFile(props) {
514575
return (
515-
<svg width={48} height={1} {...props}>
576+
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
516577
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
517578
</svg>
518579
)
@@ -528,7 +589,7 @@ exports[`cli should work with stdin 1`] = `
528589
529590
function SvgComponent(props) {
530591
return (
531-
<svg width={48} height={1} {...props}>
592+
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
532593
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
533594
</svg>
534595
)

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`util #convertFile should convert a file 1`] = `
55
66
function SvgFile(props) {
77
return (
8-
<svg width={48} height={1} {...props}>
8+
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
99
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
1010
</svg>
1111
)
@@ -20,7 +20,13 @@ exports[`util #convertFile should support a custom config path 1`] = `
2020
2121
function SvgFile(props) {
2222
return (
23-
<svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 48 1\\" {...props}>
23+
<svg
24+
width=\\"1em\\"
25+
height=\\"1em\\"
26+
viewBox=\\"0 0 48 1\\"
27+
xmlns=\\"http://www.w3.org/2000/svg\\"
28+
{...props}
29+
>
2430
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
2531
</svg>
2632
)

0 commit comments

Comments
 (0)