Updated to SVGO 2

gregberge · Jun 8, 2021 · 2a8eb01 · 2a8eb01
1 parent b360117
commit 2a8eb01
Show file tree

Hide file tree

Showing 15 changed files with 267 additions and 165 deletions.
diff --git a/__fixtures__/withSvgoYml/.svgo.json b/__fixtures__/withSvgoYml/.svgo.json
@@ -1 +1 @@
-{"plugins": [{"removeTitle": false}]}
+{"plugins": [{"name": "removeTitle", "active": false}]}
diff --git a/__fixtures__/withSvgoYml/.svgo.yml b/__fixtures__/withSvgoYml/.svgo.yml
@@ -1,2 +1,3 @@
 plugins:
-  - removeTitle: false
+  - name: removeTitle
+    active: false
diff --git a/packages/cli/src/index.test.js b/packages/cli/src/index.test.js
@@ -100,7 +100,7 @@ describe('cli', () => {
 
   it('should support --svgo-config as json', async () => {
     const result = await cli(
-      `--svgo-config '{"plugins": [{"removeTitle": false}]}' __fixtures__/simple/file.svg`,
+      `--svgo-config '{"plugins": [{"name": "removeTitle", "active": false}]}' __fixtures__/simple/file.svg`,
     )
     expect(result).toMatchSnapshot()
   }, 10000)

diff --git a/packages/core/src/__snapshots__/config.test.js.snap b/packages/core/src/__snapshots__/config.test.js.snap
@@ -22,7 +22,14 @@ Object {
   "runtimeConfig": true,
   "svgProps": null,
   "svgo": true,
-  "svgoConfig": null,
+  "svgoConfig": Object {
+    "plugins": Array [
+      Object {
+        "active": true,
+        "name": "convertStyleToAttrs",
+      },
+    ],
+  },
   "template": null,
   "titleProp": false,
   "typescript": false,
@@ -51,7 +58,14 @@ Object {
   "runtimeConfig": true,
   "svgProps": null,
   "svgo": true,
-  "svgoConfig": null,
+  "svgoConfig": Object {
+    "plugins": Array [
+      Object {
+        "active": true,
+        "name": "convertStyleToAttrs",
+      },
+    ],
+  },
   "template": null,
   "titleProp": false,
   "typescript": false,
@@ -75,7 +89,14 @@ Object {
   "runtimeConfig": true,
   "svgProps": null,
   "svgo": true,
-  "svgoConfig": null,
+  "svgoConfig": Object {
+    "plugins": Array [
+      Object {
+        "active": true,
+        "name": "convertStyleToAttrs",
+      },
+    ],
+  },
   "template": null,
   "titleProp": false,
   "typescript": false,
@@ -104,7 +125,14 @@ Object {
   "runtimeConfig": true,
   "svgProps": null,
   "svgo": true,
-  "svgoConfig": null,
+  "svgoConfig": Object {
+    "plugins": Array [
+      Object {
+        "active": true,
+        "name": "convertStyleToAttrs",
+      },
+    ],
+  },
   "template": null,
   "titleProp": false,
   "typescript": false,
@@ -133,7 +161,14 @@ Object {
   "runtimeConfig": true,
   "svgProps": null,
   "svgo": true,
-  "svgoConfig": null,
+  "svgoConfig": Object {
+    "plugins": Array [
+      Object {
+        "active": true,
+        "name": "convertStyleToAttrs",
+      },
+    ],
+  },
   "template": null,
   "titleProp": false,
   "typescript": false,
@@ -162,7 +197,14 @@ Object {
   "runtimeConfig": true,
   "svgProps": null,
   "svgo": true,
-  "svgoConfig": null,
+  "svgoConfig": Object {
+    "plugins": Array [
+      Object {
+        "active": true,
+        "name": "convertStyleToAttrs",
+      },
+    ],
+  },
   "template": null,
   "titleProp": false,
   "typescript": false,
@@ -186,7 +228,14 @@ Object {
   "runtimeConfig": true,
   "svgProps": null,
   "svgo": true,
-  "svgoConfig": null,
+  "svgoConfig": Object {
+    "plugins": Array [
+      Object {
+        "active": true,
+        "name": "convertStyleToAttrs",
+      },
+    ],
+  },
   "template": null,
   "titleProp": false,
   "typescript": false,
@@ -215,7 +264,14 @@ Object {
   "runtimeConfig": true,
   "svgProps": null,
   "svgo": true,
-  "svgoConfig": null,
+  "svgoConfig": Object {
+    "plugins": Array [
+      Object {
+        "active": true,
+        "name": "convertStyleToAttrs",
+      },
+    ],
+  },
   "template": null,
   "titleProp": false,
   "typescript": false,

diff --git a/packages/core/src/__snapshots__/convert.test.js.snap b/packages/core/src/__snapshots__/convert.test.js.snap
@@ -13,7 +13,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -36,7 +36,7 @@ function SvgComponent() {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -59,7 +59,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -88,7 +88,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -112,7 +112,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <Path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <Path d=\\"M51 37 37 51M51 51 37 37\\" />
       </G>
     </Svg>
   )
@@ -136,7 +136,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <Svg.Path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <Svg.Path d=\\"M51 37 37 51M51 51 37 37\\" />
       </Svg.G>
     </Svg>
   )
@@ -166,7 +166,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <Path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <Path d=\\"M51 37 37 51M51 51 37 37\\" />
       </G>
     </Svg>
   )
@@ -190,7 +190,7 @@ function SvgComponent() {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <Path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <Path d=\\"M51 37 37 51M51 51 37 37\\" />
       </G>
     </Svg>
   )
@@ -220,7 +220,7 @@ function SvgComponent(props, svgRef) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <Path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <Path d=\\"M51 37 37 51M51 51 37 37\\" />
       </G>
     </Svg>
   )
@@ -250,7 +250,7 @@ function SvgComponent(props, svgRef) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -281,7 +281,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -304,7 +304,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -327,7 +327,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -378,7 +378,7 @@ exports[`convert config should support options 14 1`] = `
 "import * as React from \\"react\\";
 
 function SvgComponent(props) {
-  return <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><g stroke=\\"#063855\\" strokeWidth={2} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><path d=\\"M51 37L37 51M51 51L37 37\\" /></g></svg>;
+  return <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><g stroke=\\"#063855\\" strokeWidth={2} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><path d=\\"M51 37 37 51M51 51 37 37\\" /></g></svg>;
 }
 
 export default SvgComponent;"
@@ -411,7 +411,7 @@ function SvgComponent({ title, titleId, ...props }) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -434,7 +434,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -458,7 +458,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -505,7 +505,7 @@ function SvgComponent(props) {
         fillRule=\\"evenodd\\"
         strokeLinecap=\\"square\\"
       >
-        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+        <path d=\\"M51 37 37 51M51 51 37 37\\" />
       </g>
     </svg>
   )
@@ -599,9 +599,8 @@ function SvgComponent(props) {
         strokeLinecap=\\"square\\"
       >
         <g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
-          <path d=\\"M51 37L37 51M51 51L37 37\\" id=\\"prefix__Shape\\" />
+          <path d=\\"M51 37 37 51M51 51 37 37\\" id=\\"prefix__Shape\\" />
         </g>
-        <style />
       </g>
     </svg>
   )
@@ -616,7 +615,13 @@ exports[`convert should remove null characters 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg xmlns=\\"http://www.w3.org/2000/svg\\" width={25} height={25} {...props}>
+    <svg
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      width={25}
+      height={25}
+      xmlSpace=\\"preserve\\"
+      {...props}
+    >
       <path
         d=\\"M19.4 24.5H5.6c-2.8 0-5.1-2.3-5.1-5.1V5.6C.5 2.8 2.8.5 5.6.5h13.8c2.8 0 5.1 2.3 5.1 5.1v13.8c0 2.8-2.3 5.1-5.1 5.1z\\"
         fill=\\"#fff\\"
@@ -637,12 +642,11 @@ exports[`convert should remove style tags 1`] = `
 function SvgComponent(props) {
   return (
     <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
+      <style />
       <g fill=\\"red\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
         <g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
-          <path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\" />
-          <path d=\\"M51 51L37 37\\" />
+          <path d=\\"M51 37 37 51M51 51 37 37\\" id=\\"prefix__Shape\\" />
         </g>
-        <style />
       </g>
     </svg>
   )

diff --git a/packages/core/src/config.js b/packages/core/src/config.js
@@ -13,7 +13,7 @@ export const DEFAULT_CONFIG = {
   replaceAttrValues: null,
   svgProps: null,
   svgo: true,
-  svgoConfig: null,
+  svgoConfig: { plugins: [{ name: 'convertStyleToAttrs', active: true }]},
   template: null,
   titleProp: false,
   runtimeConfig: true,

diff --git a/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap b/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap
@@ -41,7 +41,7 @@ var _ref = /*#__PURE__*/React.createElement(\\"g\\", {
   fillRule: \\"evenodd\\",
   strokeLinecap: \\"square\\"
 }, /*#__PURE__*/React.createElement(\\"path\\", {
-  d: \\"M51 37L37 51M51 51L37 37\\"
+  d: \\"M51 37 37 51M51 51 37 37\\"
 }));
 
 function SvgIcon(props) {

diff --git a/packages/plugin-svgo/package.json b/packages/plugin-svgo/package.json
@@ -28,6 +28,6 @@
   "dependencies": {
     "cosmiconfig": "^7.0.0",
     "deepmerge": "^4.2.2",
-    "svgo": "^1.2.2"
+    "svgo": "^2.3.0"
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"plugins": [{"removeTitle": false}]}
		{"plugins": [{"name": "removeTitle", "active": false}]}