Upgrade @svgr plugins to latest & update script accordingly

- see https://react-svgr.com/docs/migrate/ for high level of export + API changes - see https://github.com/svg/svgo#default-preset for svgo config changes + remove need for manual `prettier` CLI command with `@svgr/plugin-prettier` and a newline trim
elastic · Jun 19, 2023 · 11d5777 · 11d5777
1 parent 473b6c6
commit 11d5777
Show file tree

Hide file tree

Showing 3 changed files with 326 additions and 239 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
     "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss",
     "build-pack": "yarn build && npm pack",
-    "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
+    "compile-icons": "node ./scripts/compile-icons.js",
     "compile-scss": "node ./scripts/compile-scss.js",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
     "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-css-in-js && yarn lint-sass",
@@ -135,8 +135,10 @@
     "@storybook/react": "^7.0.17",
     "@storybook/react-webpack5": "^7.0.17",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@svgr/core": "5.5.0",
-    "@svgr/plugin-svgo": "^4.0.3",
+    "@svgr/core": "8.0.0",
+    "@svgr/plugin-jsx": "^8.0.1",
+    "@svgr/plugin-prettier": "^8.0.1",
+    "@svgr/plugin-svgo": "^8.0.1",
     "@testing-library/dom": "^8.12.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.5",

diff --git a/scripts/compile-icons.js b/scripts/compile-icons.js
@@ -1,10 +1,9 @@
 const glob = require('glob');
-const svgr = require('@svgr/core').default;
+const svgr = require('@svgr/core').transform;
 const path = require('path');
 const fs = require('fs');
-const license = require('../.eslintrc.js').rules[
-  'local/require-license-header'
-][1].license;
+const license =
+  require('../.eslintrc.js').rules['local/require-license-header'][1].license;
 
 const rootDir = path.resolve(__dirname, '..');
 const srcDir = path.resolve(rootDir, 'src');
@@ -34,13 +33,22 @@ iconFiles.forEach((filePath) => {
     let jsxSource = svgr.sync(
       svgSource,
       {
-        plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
+        plugins: [
+          '@svgr/plugin-svgo',
+          '@svgr/plugin-jsx',
+          '@svgr/plugin-prettier',
+        ],
         svgoConfig: {
           plugins: [
-            { cleanupIDs: true },
-            { prefixIds: false },
-            { removeViewBox: false },
-            { removeUselessStrokeAndFill: false },
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                  removeUselessStrokeAndFill: false,
+                },
+              },
+            },
           ],
         },
         svgProps: {
@@ -49,12 +57,11 @@ iconFiles.forEach((filePath) => {
         titleProp: true,
         typescript: true,
         template: (
-          { template },
-          opts,
-          { imports, interfaces, componentName, props, jsx }
+          { imports, interfaces, componentName, props, jsx },
+          { tpl }
         ) =>
           hasIds
-            ? template.ast`
+            ? tpl`
 ${imports}
 import { htmlIdGenerator } from '../../../services';
 ${interfaces}
@@ -66,7 +73,7 @@ const ${componentName} = (${props}) => {
 };
 export const icon = ${componentName};
 `
-            : template.ast`
+            : tpl`
 ${imports}
 ${interfaces}
 const ${componentName} = (${props}) => ${jsx}
@@ -88,7 +95,8 @@ export const icon = ${componentName};
 
     const outputFilePath = `${outputDir}/${fileName}.tsx`;
     const comment = `\n// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js\n\n`;
-    fs.writeFileSync(outputFilePath, license + comment + jsxSource);
+    const output = license.trimStart() + comment + jsxSource;
+    fs.writeFileSync(outputFilePath, output);
   } catch (e) {
     console.error(`Error processing ${filePath}`);
     console.error(e);