[EuiIcon] Upgrade svgr/svgo dependencies to latest (#6843)

* 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 * Run `yarn compile-icons` * changelog * Lint fix
elastic · Jun 20, 2023 · 4fab267 · 4fab267
1 parent 473b6c6
commit 4fab267
Show file tree

Hide file tree

Showing 475 changed files with 2,812 additions and 3,210 deletions.
diff --git a/package.json b/package.json
@@ -135,8 +135,9 @@
     "@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-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');
@@ -37,10 +36,15 @@ iconFiles.forEach((filePath) => {
         plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
         svgoConfig: {
           plugins: [
-            { cleanupIDs: true },
-            { prefixIds: false },
-            { removeViewBox: false },
-            { removeUselessStrokeAndFill: false },
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                  removeUselessStrokeAndFill: false,
+                },
+              },
+            },
           ],
         },
         svgProps: {
@@ -49,12 +53,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 +69,7 @@ const ${componentName} = (${props}) => {
 };
 export const icon = ${componentName};
 `
-            : template.ast`
+            : tpl`
 ${imports}
 ${interfaces}
 const ${componentName} = (${props}) => ${jsx}

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
diff --git a/src/components/icon/assets/accessibility.tsx b/src/components/icon/assets/accessibility.tsx
@@ -9,16 +9,16 @@
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 
 import * as React from 'react';
+import type { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-
 const EuiIconAccessibility = ({
   title,
   titleId,
   ...props
-}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={16}
@@ -28,8 +28,7 @@ const EuiIconAccessibility = ({
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm3.974 4.342a.5.5 0 01-.233.596l-.083.036L9 6.86v2.559l.974 2.923a.5.5 0 01-.233.596l-.083.036a.5.5 0 01-.596-.233l-.036-.083-1-3L8 9.5l-.026.158-1 3a.5.5 0 01-.97-.228l.022-.088L7 9.416V6.86l-2.658-.886a.5.5 0 01.228-.97l.088.022L7.583 6h.833l2.926-.974a.5.5 0 01.632.316zM8 3a1 1 0 110 2 1 1 0 010-2z" />
+    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm3.974 4.342a.5.5 0 0 1-.233.596l-.083.036L9 6.86v2.559l.974 2.923a.5.5 0 0 1-.233.596l-.083.036a.5.5 0 0 1-.596-.233l-.036-.083-1-3L8 9.5l-.026.158-1 3a.5.5 0 0 1-.97-.228l.022-.088L7 9.416V6.86l-2.658-.886a.5.5 0 0 1 .228-.97l.088.022L7.583 6h.833l2.926-.974a.5.5 0 0 1 .632.316ZM8 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z" />
   </svg>
 );
-
 export const icon = EuiIconAccessibility;
diff --git a/src/components/icon/assets/aggregate.tsx b/src/components/icon/assets/aggregate.tsx
@@ -9,30 +9,29 @@
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 
 import * as React from 'react';
+import type { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-
 const EuiIconAggregate = ({
   title,
   titleId,
   ...props
-}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
     viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       fillRule="evenodd"
-      d="M2.5 2a.5.5 0 100 1 .5.5 0 000-1zm0-1a1.5 1.5 0 011.415 1h1.908a1.5 1.5 0 011.393.943L8.839 7H12.5a.5.5 0 010 1H8.839l-1.623 4.057A1.5 1.5 0 015.823 13H3.915a1.5 1.5 0 110-1h1.908a.5.5 0 00.464-.314L7.761 8H3.915a1.5 1.5 0 110-1H7.76L6.287 3.314A.5.5 0 005.823 3H3.915A1.5 1.5 0 112.5 1zm0 11a.5.5 0 110 1 .5.5 0 010-1zM3 7.5a.5.5 0 10-1 0 .5.5 0 001 0zm9.354-3.354a.5.5 0 00-.708.708L13.793 7a.707.707 0 010 1l-2.147 2.146a.5.5 0 00.708.708L14.5 8.707a1.707 1.707 0 000-2.414l-2.146-2.147z"
+      d="M2.5 2a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1zm0-1a1.5 1.5 0 0 1 1.415 1h1.908a1.5 1.5 0 0 1 1.393.943L8.839 7H12.5a.5.5 0 0 1 0 1H8.839l-1.623 4.057A1.5 1.5 0 0 1 5.823 13H3.915a1.5 1.5 0 1 1 0-1h1.908a.5.5 0 0 0 .464-.314L7.761 8H3.915a1.5 1.5 0 1 1 0-1H7.76L6.287 3.314A.5.5 0 0 0 5.823 3H3.915A1.5 1.5 0 1 1 2.5 1zm0 11a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM3 7.5a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0zm9.354-3.354a.5.5 0 0 0-.708.708L13.793 7a.707.707 0 0 1 0 1l-2.147 2.146a.5.5 0 0 0 .708.708L14.5 8.707a1.707 1.707 0 0 0 0-2.414l-2.146-2.147z"
     />
   </svg>
 );
-
 export const icon = EuiIconAggregate;
diff --git a/src/components/icon/assets/analyzeEvent.tsx b/src/components/icon/assets/analyzeEvent.tsx
@@ -9,32 +9,31 @@
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 
 import * as React from 'react';
+import type { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-
 const EuiIconAnalyzeEvent = ({
   title,
   titleId,
   ...props
-}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
-    viewBox="0 0 16 16"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       fillRule="evenodd"
+      d="M8 9.169 2 5.25v6.17l6 3.428 6-3.428V5.25L8 9.17ZM15 4v8l-7 4-7-4V4l7-4 7 4Zm-1.428.336L8 1.152 2.428 4.336 8 7.974l5.572-3.638Z"
       clipRule="evenodd"
-      d="M8 9.169L2 5.25v6.17l6 3.428 6-3.428V5.25L8 9.17zM15 4v8l-7 4-7-4V4l7-4 7 4zm-1.428.336L8 1.152 2.428 4.336 8 7.974l5.572-3.638z"
     />
   </svg>
 );
-
 export const icon = EuiIconAnalyzeEvent;
diff --git a/src/components/icon/assets/annotation.tsx b/src/components/icon/assets/annotation.tsx
@@ -9,16 +9,16 @@
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 
 import * as React from 'react';
+import type { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-
 const EuiIconAnnotation = ({
   title,
   titleId,
   ...props
-}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={16}
@@ -28,8 +28,7 @@ const EuiIconAnnotation = ({
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M3 6.5a4.5 4.5 0 115 4.473V16H7v-5.027A4.5 4.5 0 013 6.5z" />
+    <path d="M3 6.5a4.5 4.5 0 1 1 5 4.473V16H7v-5.027A4.5 4.5 0 0 1 3 6.5Z" />
   </svg>
 );
-
 export const icon = EuiIconAnnotation;
diff --git a/src/components/icon/assets/apm_trace.tsx b/src/components/icon/assets/apm_trace.tsx
@@ -9,16 +9,16 @@
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 
 import * as React from 'react';
+import type { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-
 const EuiIconApmTrace = ({
   title,
   titleId,
   ...props
-}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={16}
@@ -28,8 +28,7 @@ const EuiIconApmTrace = ({
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M2 0h12a2 2 0 012 2v12a2 2 0 01-2 2H2a2 2 0 01-2-2V2a2 2 0 012-2zm0 1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V2a1 1 0 00-1-1H2zm.5 2h10a.5.5 0 110 1h-10a.5.5 0 010-1zm1 3h6a.5.5 0 010 1h-6a.5.5 0 010-1zm2 3h4a.5.5 0 010 1h-4a.5.5 0 010-1zm3 3h5a.5.5 0 110 1h-5a.5.5 0 110-1z" />
+    <path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2Zm.5 2h10a.5.5 0 1 1 0 1h-10a.5.5 0 0 1 0-1Zm1 3h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1Zm2 3h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1Zm3 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 1 1 0-1Z" />
   </svg>
 );
-
 export const icon = EuiIconApmTrace;
diff --git a/src/components/icon/assets/app_add_data.tsx b/src/components/icon/assets/app_add_data.tsx
@@ -9,16 +9,16 @@
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 
 import * as React from 'react';
+import type { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-
 const EuiIconAppAddData = ({
   title,
   titleId,
   ...props
-}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={32}
@@ -28,12 +28,11 @@ const EuiIconAppAddData = ({
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M32 30H0V3h12.57l3 5H32v22zM2 28h28V10H14.43l-3-5H2v23z" />
+    <path d="M32 30H0V3h12.57l3 5H32v22ZM2 28h28V10H14.43l-3-5H2v23Z" />
     <path
-      className="euiIcon__fillSecondary"
       d="M21 18h-4v-4h-2v4h-4v2h4v4h2v-4h4z"
+      className="euiIcon__fillSecondary"
     />
   </svg>
 );
-
 export const icon = EuiIconAppAddData;
diff --git a/src/components/icon/assets/app_advanced_settings.tsx b/src/components/icon/assets/app_advanced_settings.tsx
@@ -9,16 +9,16 @@
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 
 import * as React from 'react';
+import type { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-
 const EuiIconAppAdvancedSettings = ({
   title,
   titleId,
   ...props
-}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={32}
@@ -29,21 +29,20 @@ const EuiIconAppAdvancedSettings = ({
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
-      className="euiIcon__fillSecondary"
       d="M2.909 26.182h1.939v4.848H2.909z"
+      className="euiIcon__fillSecondary"
     />
-    <path d="M4.848 16.62V0H2.91v16.62a3.879 3.879 0 101.94 0zm-.97 5.683a1.94 1.94 0 110-3.879 1.94 1.94 0 010 3.879z" />
+    <path d="M4.848 16.62V0H2.91v16.62a3.879 3.879 0 1 0 1.94 0Zm-.97 5.683a1.94 1.94 0 1 1 0-3.879 1.94 1.94 0 0 1 0 3.879Z" />
     <path
-      className="euiIcon__fillSecondary"
       d="M14.545 16.485h1.939V31.03h-1.939z"
+      className="euiIcon__fillSecondary"
     />
-    <path d="M16.485 6.924V0h-1.94v6.924a3.879 3.879 0 101.94 0zm-.97 5.682a1.94 1.94 0 110-3.879 1.94 1.94 0 010 3.88z" />
+    <path d="M16.485 6.924V0h-1.94v6.924a3.879 3.879 0 1 0 1.94 0Zm-.97 5.682a1.94 1.94 0 1 1 0-3.879 1.94 1.94 0 0 1 0 3.88Z" />
     <path
-      className="euiIcon__fillSecondary"
       d="M26.182 26.182h1.939v4.848h-1.939z"
+      className="euiIcon__fillSecondary"
     />
-    <path d="M28.121 16.62V0h-1.94v16.62a3.879 3.879 0 101.94 0zm-.97 5.683a1.94 1.94 0 110-3.879 1.94 1.94 0 010 3.879z" />
+    <path d="M28.121 16.62V0h-1.94v16.62a3.879 3.879 0 1 0 1.94 0Zm-.97 5.683a1.94 1.94 0 1 1 0-3.879 1.94 1.94 0 0 1 0 3.879Z" />
   </svg>
 );
-
 export const icon = EuiIconAppAdvancedSettings;
diff --git a/src/components/icon/assets/app_agent.tsx b/src/components/icon/assets/app_agent.tsx
@@ -9,31 +9,30 @@
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 
 import * as React from 'react';
+import type { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-
 const EuiIconAppAgent = ({
   title,
   titleId,
   ...props
-}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={32}
     height={32}
     viewBox="0 0 32 32"
-    xmlns="http://www.w3.org/2000/svg"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z" />
+    <path d="M2.996 18.636 0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733ZM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4Z" />
     <path
+      d="m11 22.166-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6Zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4Z"
       className="euiIcon__fillSecondary"
-      d="M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
     />
   </svg>
 );
-
 export const icon = EuiIconAppAgent;
diff --git a/src/components/icon/assets/app_apm.tsx b/src/components/icon/assets/app_apm.tsx
@@ -9,16 +9,16 @@
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 
 import * as React from 'react';
+import type { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-
 const EuiIconAppApm = ({
   title,
   titleId,
   ...props
-}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={32}
@@ -30,10 +30,9 @@ const EuiIconAppApm = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <path d="M3 10h4v2H1V1h30v6h-2V3H3v7zm26 19v-6h2v8H18v-8h2v6h9z" />
     <path
+      d="M31 10H9v11h12c5.523 0 10-4.477 10-10v-1zm-10 9H11v-7h17.938A8.001 8.001 0 0 1 21 19z"
       className="euiIcon__fillSecondary"
-      d="M31 10H9v11h12c5.523 0 10-4.477 10-10v-1zm-10 9H11v-7h17.938A8.001 8.001 0 0121 19z"
     />
   </svg>
 );
-
 export const icon = EuiIconAppApm;