cli: bump webpack and rollup svgr plugins

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/cli/package.json

@@ -51,8 +51,8 @@
     "@sucrase/webpack-loader": "^2.0.0",
     "@svgr/plugin-jsx": "6.2.x",
     "@svgr/plugin-svgo": "6.2.x",
-    "@svgr/rollup": "5.5.x",
-    "@svgr/webpack": "5.5.x",
+    "@svgr/rollup": "6.2.x",
+    "@svgr/webpack": "6.2.x",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
     "@typescript-eslint/parser": "^5.9.0",
@@ -141,6 +141,7 @@
     "@types/recursive-readdir": "^2.2.0",
     "@types/rollup-plugin-peer-deps-external": "^2.2.0",
     "@types/rollup-plugin-postcss": "^2.0.0",
+    "@types/svgo": "^2.6.2",
     "@types/tar": "^6.1.1",
     "@types/terser-webpack-plugin": "^5.0.4",
     "@types/yarnpkg__lockfile": "^1.1.4",

packages/cli/src/lib/svgrTemplate.ts

@@ -20,28 +20,23 @@
  * them with .icon.svg
  */
 export function svgrTemplate(
-  { template }: any,
-  _opts: any,
-  { imports, interfaces, componentName, jsx }: any,
+  { imports, interfaces, componentName, props, jsx }: any,
+  { tpl }: any,
 ) {
-  const iconName = {
-    ...componentName,
-    name: `${componentName.name.replace(/icon$/, '')}Icon`,
-  };
+  const name = `${componentName.replace(/icon$/, '')}Icon`;
 
   const defaultExport = {
     type: 'ExportDefaultDeclaration',
-    declaration: iconName,
+    declaration: { type: 'Identifier', name },
   };
 
-  const typeScriptTemplate = template.smart({ plugins: ['typescript'] });
-  return typeScriptTemplate.ast`
+  return tpl`
 ${imports}
 import SvgIcon from '@material-ui/core/SvgIcon';
 
 ${interfaces}
 
-const ${iconName} = props => React.createElement(SvgIcon, props, ${jsx.children});
+const ${name} = (${props}) => React.createElement(SvgIcon, ${props}, ${jsx.children});
 
 ${defaultExport}`;
 }