Skip to content

Commit

Permalink
fix: prevent removing the namespace by svgr ([#475](#475) (#498)
Browse files Browse the repository at this point in the history 
Co-authored-by: Michael Gruben <michael.gruben@empiriecom.com>
  • Loading branch information
@MichaelGruben @MichaelGrubenEmp
MichaelGruben and MichaelGrubenEmp committed Nov 14, 2020
1 parent 9fb0af5 commit 00e84ea
Show file tree
Hide file tree
Showing 8 changed files with 182 additions and 60 deletions.
2 changes: 1 addition & 1 deletion packages/babel-preset/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function replaceMapToValues(replaceMap) {
}

const plugin = (api, opts) => {
let toRemoveAttributes = ['xmlns', 'xmlnsXlink', 'version']
let toRemoveAttributes = ['version']
let toAddAttributes = []

if (opts.svgProps) {
Expand Down
109 changes: 85 additions & 24 deletions packages/cli/src/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`cli should not override config with cli defaults 1`] = `
"import * as React from \\"react\\";
function SvgFile() {
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>;
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>;
}
export default SvgFile;
Expand All @@ -23,7 +23,12 @@ exports[`cli should support --prettier-config as file 1`] = `
function SvgFile(props) {
return (
<svg width={48} height={1} {...props}>
<svg
width={48}
height={1}
xmlns=\\"http://www.w3.org/2000/svg\\"
{...props}
>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -39,7 +44,12 @@ exports[`cli should support --prettier-config as json 1`] = `
function SvgFile(props) {
return (
<svg width={48} height={1} {...props}>
<svg
width={48}
height={1}
xmlns=\\"http://www.w3.org/2000/svg\\"
{...props}
>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -55,7 +65,7 @@ exports[`cli should support --svgo-config as file 1`] = `
function SvgFile(props) {
return (
<svg width={48} height={1} {...props}>
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<title>{'Rectangle 5'}</title>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
Expand All @@ -72,7 +82,7 @@ exports[`cli should support --svgo-config as json 1`] = `
function SvgFile(props) {
return (
<svg width={48} height={1} {...props}>
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<title>{'Rectangle 5'}</title>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
Expand Down Expand Up @@ -138,7 +148,7 @@ exports[`cli should support stdin filepath 1`] = `
function SvgFile(props) {
return (
<svg width={48} height={1} {...props}>
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -154,7 +164,7 @@ exports[`cli should support various args: --expand-props none 1`] = `
function SvgFile() {
return (
<svg width={48} height={1}>
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -170,7 +180,7 @@ exports[`cli should support various args: --expand-props start 1`] = `
function SvgFile(props) {
return (
<svg {...props} width={48} height={1}>
<svg {...props} width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -186,7 +196,13 @@ exports[`cli should support various args: --icon 1`] = `
function SvgFile(props) {
return (
<svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 48 1\\" {...props}>
<svg
width=\\"1em\\"
height=\\"1em\\"
viewBox=\\"0 0 48 1\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
{...props}
>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -203,7 +219,7 @@ import Svg, { Path } from 'react-native-svg'
function SvgFile() {
return (
<Svg width={48} height={1}>
<Svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</Svg>
)
Expand All @@ -220,7 +236,13 @@ import Svg, { Path } from 'react-native-svg'
function SvgFile(props) {
return (
<Svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 48 1\\" {...props}>
<Svg
width=\\"1em\\"
height=\\"1em\\"
viewBox=\\"0 0 48 1\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
{...props}
>
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</Svg>
)
Expand All @@ -237,7 +259,13 @@ import Svg, { Path } from 'react-native-svg'
function SvgFile(props, svgRef) {
return (
<Svg width={48} height={1} ref={svgRef} {...props}>
<Svg
width={48}
height={1}
xmlns=\\"http://www.w3.org/2000/svg\\"
ref={svgRef}
{...props}
>
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</Svg>
)
Expand All @@ -255,7 +283,7 @@ import Svg, { Path } from 'react-native-svg'
function SvgFile(props) {
return (
<Svg width={48} height={1} {...props}>
<Svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</Svg>
)
Expand All @@ -271,7 +299,7 @@ exports[`cli should support various args: --no-dimensions 1`] = `
function SvgFile(props) {
return (
<svg viewBox=\\"0 0 48 1\\" {...props}>
<svg viewBox=\\"0 0 48 1\\" xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -286,7 +314,7 @@ exports[`cli should support various args: --no-prettier 1`] = `
"import * as React from \\"react\\";
function SvgFile(props) {
return <svg width={48} height={1} {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
return <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
}
export default SvgFile;
Expand All @@ -298,7 +326,14 @@ exports[`cli should support various args: --no-svgo 1`] = `
function SvgFile(props) {
return (
<svg width=\\"48px\\" height=\\"1px\\" viewBox=\\"0 0 48 1\\" {...props}>
<svg
width=\\"48px\\"
height=\\"1px\\"
viewBox=\\"0 0 48 1\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
{...props}
>
<title>{'Rectangle 5'}</title>
<desc>{'Created with Sketch.'}</desc>
<defs />
Expand Down Expand Up @@ -339,7 +374,13 @@ exports[`cli should support various args: --ref 1`] = `
function SvgFile(props, svgRef) {
return (
<svg width={48} height={1} ref={svgRef} {...props}>
<svg
width={48}
height={1}
xmlns=\\"http://www.w3.org/2000/svg\\"
ref={svgRef}
{...props}
>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -356,7 +397,7 @@ exports[`cli should support various args: --replace-attr-values "#063855=current
function SvgFile(props) {
return (
<svg width={48} height={1} {...props}>
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<path d=\\"M0 0h48v1H0z\\" fill=\\"currentColor\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -372,7 +413,14 @@ exports[`cli should support various args: --svg-props "hidden={true},id=hello" 1
function SvgFile(props) {
return (
<svg width={48} height={1} hidden={true} id=\\"hello\\" {...props}>
<svg
width={48}
height={1}
xmlns=\\"http://www.w3.org/2000/svg\\"
hidden={true}
id=\\"hello\\"
{...props}
>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -388,7 +436,13 @@ exports[`cli should support various args: --title-prop 1`] = `
function SvgFile({ title, titleId, ...props }) {
return (
<svg width={48} height={1} aria-labelledby={titleId} {...props}>
<svg
width={48}
height={1}
xmlns=\\"http://www.w3.org/2000/svg\\"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
Expand All @@ -415,6 +469,7 @@ function SvgFile(
<svg
width={48}
height={1}
xmlns=\\"http://www.w3.org/2000/svg\\"
ref={svgRef}
aria-labelledby={titleId}
{...props}
Expand All @@ -439,7 +494,13 @@ function SvgFile(
svgRef?: React.Ref<SVGSVGElement>,
) {
return (
<svg width={48} height={1} ref={svgRef} {...props}>
<svg
width={48}
height={1}
xmlns=\\"http://www.w3.org/2000/svg\\"
ref={svgRef}
{...props}
>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -456,7 +517,7 @@ exports[`cli should support various args: --typescript 1`] = `
function SvgFile(props: React.SVGProps<SVGSVGElement>) {
return (
<svg width={48} height={1} {...props}>
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand Down Expand Up @@ -512,7 +573,7 @@ exports[`cli should work with a simple file 1`] = `
function SvgFile(props) {
return (
<svg width={48} height={1} {...props}>
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -528,7 +589,7 @@ exports[`cli should work with stdin 1`] = `
function SvgComponent(props) {
return (
<svg width={48} height={1} {...props}>
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand Down
10 changes: 8 additions & 2 deletions packages/cli/src/__snapshots__/util.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`util #convertFile should convert a file 1`] = `
function SvgFile(props) {
return (
<svg width={48} height={1} {...props}>
<svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand All @@ -20,7 +20,13 @@ exports[`util #convertFile should support a custom config path 1`] = `
function SvgFile(props) {
return (
<svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 48 1\\" {...props}>
<svg
width=\\"1em\\"
height=\\"1em\\"
viewBox=\\"0 0 48 1\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
{...props}
>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
Expand Down
Loading

1 comment on commit 00e84ea

@vercel
Copy link

@vercel vercel bot commented on 00e84ea Nov 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.