Update @svgr/core and @svgr/plugin-svgo (opensearch-project#594)

Co-authored-by: Sergey Myssak <[email protected]> Signed-off-by: Andrey Myssak <[email protected]>
andreymyssak · Mar 31, 2023 · bfebfa8 · bfebfa8
1 parent ead8cb0
commit bfebfa8
Show file tree

Hide file tree

Showing 430 changed files with 2,023 additions and 2,645 deletions.
diff --git a/package.json b/package.json
@@ -134,8 +134,8 @@
     "@elastic/charts": "^30.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
-    "@svgr/core": "5.4.0",
-    "@svgr/plugin-svgo": "^4.0.3",
+    "@svgr/core": "^6.5.1",
+    "@svgr/plugin-svgo": "^6.5.1",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^24.0.6",

diff --git a/scripts/compile-icons.js b/scripts/compile-icons.js
@@ -10,7 +10,7 @@
  */
 
 const glob = require('glob');
-const svgr = require('@svgr/core').default;
+const { transform } = require('@svgr/core');
 const path = require('path');
 const fs = require('fs');
 const license = require('../.eslintrc.js').rules[
@@ -29,38 +29,42 @@ function pascalCase(x) {
 
 const iconFiles = glob.sync('**/*.svg', { cwd: iconsDir, realpath: true });
 
-iconFiles.forEach(async filePath => {
-  const svgSource = fs.readFileSync(filePath);
+iconFiles.forEach(async (filePath) => {
+  const svgSourceBuffer = fs.readFileSync(filePath);
+  const svgSource = svgSourceBuffer.toString();
 
   try {
-    const viewBoxPosition = svgSource.toString().indexOf('viewBox');
+    const viewBoxPosition = svgSource.indexOf('viewBox');
     if (viewBoxPosition === -1) {
       throw new Error(`${filePath} is missing a 'viewBox' attribute`);
     }
 
-    const jsxSource = await svgr(
+    const jsxSource = await transform(
       svgSource,
       {
         plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
         svgoConfig: {
           plugins: [
-            { cleanupIDs: false },
-            { prefixIds: false },
-            { removeViewBox: false },
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  cleanupIDs: false,
+                  prefixIds: false,
+                  removeViewBox: false,
+                },
+              },
+            },
           ],
         },
         svgProps: {
           xmlns: 'http://www.w3.org/2000/svg',
         },
         titleProp: true,
-        template: (
-          { template },
-          opts,
-          { imports, componentName, props, jsx }
-        ) => template.ast`
-${imports}
-const ${componentName} = (${props}) => ${jsx}
-export const icon = ${componentName};
+        template: ({ imports, componentName, props, jsx }, { tpl }) => tpl`
+            ${imports}
+            const ${componentName} = (${props}) => ${jsx}
+            export const icon = ${componentName};
         `,
       },
       {

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.js b/src/components/icon/assets/accessibility.js
@@ -10,18 +10,16 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAccessibility = ({ title, titleId, ...props }) => (
   <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 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 = OuiIconAccessibility;
diff --git a/src/components/icon/assets/aggregate.js b/src/components/icon/assets/aggregate.js
@@ -10,7 +10,6 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAggregate = ({ title, titleId, ...props }) => (
   <svg
     width={16}
@@ -22,9 +21,8 @@ const OuiIconAggregate = ({ title, 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 = OuiIconAggregate;
diff --git a/src/components/icon/assets/alert.js b/src/components/icon/assets/alert.js
@@ -10,21 +10,19 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAlert = ({ title, titleId, ...props }) => (
   <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="M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
+      d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
     />
   </svg>
 );
-
 export const icon = OuiIconAlert;
diff --git a/src/components/icon/assets/analyze_event.js b/src/components/icon/assets/analyze_event.js
@@ -10,21 +10,19 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAnalyzeEvent = ({ title, titleId, ...props }) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={14}
     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="M13.924 4.013a.605.605 0 00-.228-.236L7.304.082a.607.607 0 00-.608 0L.304 3.777A.62.62 0 000 4.304v7.392c0 .217.116.418.304.527l6.392 3.695c.188.11.42.11.608 0l6.392-3.695a.609.609 0 00.304-.527V4.304a.607.607 0 00-.076-.291zM1 5.079v6.391l6 3.47 6-3.47V5.08L7.252 8.432 7 8.579l-.252-.147L1 5.079zm11.476-.852L7 1.06 1.524 4.227 7 7.42l5.476-3.194z"
+      d="M13.924 4.013a.605.605 0 0 0-.228-.236L7.304.082a.607.607 0 0 0-.608 0L.304 3.777A.62.62 0 0 0 0 4.304v7.392c0 .217.116.418.304.527l6.392 3.695c.188.11.42.11.608 0l6.392-3.695a.609.609 0 0 0 .304-.527V4.304a.607.607 0 0 0-.076-.291ZM1 5.079v6.391l6 3.47 6-3.47V5.08L7.252 8.432 7 8.579l-.252-.147L1 5.079Zm11.476-.852L7 1.06 1.524 4.227 7 7.42l5.476-3.194Z"
     />
   </svg>
 );
-
 export const icon = OuiIconAnalyzeEvent;
diff --git a/src/components/icon/assets/annotation.js b/src/components/icon/assets/annotation.js
@@ -10,18 +10,16 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAnnotation = ({ title, titleId, ...props }) => (
   <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 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 = OuiIconAnnotation;
diff --git a/src/components/icon/assets/apm_trace.js b/src/components/icon/assets/apm_trace.js
@@ -10,18 +10,16 @@
  */
 
 import * as React from 'react';
-
 const OuiIconApmTrace = ({ title, titleId, ...props }) => (
   <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 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 = OuiIconApmTrace;
diff --git a/src/components/icon/assets/app_add_data.js b/src/components/icon/assets/app_add_data.js
@@ -10,22 +10,20 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAppAddData = ({ title, titleId, ...props }) => (
   <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="M32 30H0V3h12.57l3 5H32v22zM2 28h28V10H14.43l-3-5H2v23z" />
+    <path d="M32 30H0V3h12.57l3 5H32v22ZM2 28h28V10H14.43l-3-5H2v23Z" />
     <path
       className="ouiIcon__fillSecondary"
       d="M21 18h-4v-4h-2v4h-4v2h4v4h2v-4h4z"
     />
   </svg>
 );
-
 export const icon = OuiIconAppAddData;
diff --git a/src/components/icon/assets/app_advanced_settings.js b/src/components/icon/assets/app_advanced_settings.js
@@ -10,32 +10,30 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAppAdvancedSettings = ({ title, titleId, ...props }) => (
   <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
       className="ouiIcon__fillSecondary"
       d="M2.909 26.182h1.939v4.848H2.909z"
     />
-    <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="ouiIcon__fillSecondary"
       d="M14.545 16.485h1.939V31.03h-1.939z"
     />
-    <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="ouiIcon__fillSecondary"
       d="M26.182 26.182h1.939v4.848h-1.939z"
     />
-    <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 = OuiIconAppAdvancedSettings;
diff --git a/src/components/icon/assets/app_apm.js b/src/components/icon/assets/app_apm.js
@@ -10,22 +10,20 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAppApm = ({ title, titleId, ...props }) => (
   <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="M3 10h4v2H1V1h30v6h-2V3H3v7zm26 19v-6h2v8H18v-8h2v6h9z" />
     <path
       className="ouiIcon__fillSecondary"
-      d="M31 10H9v11h12c5.523 0 10-4.477 10-10v-1zm-10 9H11v-7h17.938A8.001 8.001 0 0121 19z"
+      d="M31 10H9v11h12c5.523 0 10-4.477 10-10v-1zm-10 9H11v-7h17.938A8.001 8.001 0 0 1 21 19z"
     />
   </svg>
 );
-
 export const icon = OuiIconAppApm;
diff --git a/src/components/icon/assets/app_app_search.js b/src/components/icon/assets/app_app_search.js
@@ -10,26 +10,24 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAppAppSearch = ({ title, titleId, ...props }) => (
   <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
       fillRule="evenodd"
-      d="M15.5 11.915L27 5.279 19.5.938a7.002 7.002 0 00-7 0l-8 4.62A7 7 0 001 11.62v9.237a7 7 0 003.5 6.061l7.5 4.33V17.98a7 7 0 013.5-6.063zM10 27.785v-9.808a9 9 0 014.5-7.793l8.503-4.91L18.5 2.672a5.003 5.003 0 00-5 0l-8 4.619A5 5 0 003 11.62v9.238a5 5 0 002.5 4.33l4.5 2.598z"
+      d="M15.5 11.915 27 5.279 19.5.938a7.002 7.002 0 0 0-7 0l-8 4.62A7 7 0 0 0 1 11.62v9.237a7 7 0 0 0 3.5 6.061l7.5 4.33V17.98a7 7 0 0 1 3.5-6.063ZM10 27.785v-9.808a9 9 0 0 1 4.5-7.793l8.503-4.91L18.5 2.672a5.003 5.003 0 0 0-5 0l-8 4.619A5 5 0 0 0 3 11.62v9.238a5 5 0 0 0 2.5 4.33l4.5 2.598Z"
     />
     <path
       fillRule="evenodd"
       className="ouiIcon__fillSecondary"
-      d="M18.409 13.55a7.089 7.089 0 011.035 1.711A6.93 6.93 0 0120 17.98v13.27l7.5-4.33a7 7 0 003.5-6.061v-9.239a6.992 6.992 0 00-1.587-4.421L18.409 13.55zm2.777.705A8.933 8.933 0 0122 17.979v9.807l4.5-2.598a5 5 0 002.5-4.33V11.62c0-.588-.106-1.161-.303-1.7l-7.511 4.335z"
+      d="M18.409 13.55a7.089 7.089 0 0 1 1.035 1.711A6.93 6.93 0 0 1 20 17.98v13.27l7.5-4.33a7 7 0 0 0 3.5-6.061v-9.239a6.992 6.992 0 0 0-1.587-4.421L18.409 13.55Zm2.777.705A8.933 8.933 0 0 1 22 17.979v9.807l4.5-2.598a5 5 0 0 0 2.5-4.33V11.62c0-.588-.106-1.161-.303-1.7l-7.511 4.335Z"
     />
   </svg>
 );
-
 export const icon = OuiIconAppAppSearch;
diff --git a/src/components/icon/assets/app_auditbeat.js b/src/components/icon/assets/app_auditbeat.js
@@ -10,19 +10,17 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAppAuditbeat = ({ title, titleId, ...props }) => (
   <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 className="ouiIcon__fillSecondary" d="M15 0h2v32h-2z" />
     <path d="M0 32h13v-2H2V2h11V0H0zM19 0v2h11v28H19v2h13V0z" />
   </svg>
 );
-
 export const icon = OuiIconAppAuditbeat;
diff --git a/src/components/icon/assets/app_canvas.js b/src/components/icon/assets/app_canvas.js
@@ -10,22 +10,20 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAppCanvas = ({ title, titleId, ...props }) => (
   <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
       className="ouiIcon__fillSecondary"
       d="M7 17h2v7H7zM12 14h2v10h-2zM17 16h2v8h-2zM22 14h3v2h-3zM22 18h3v2h-3zM22 22h3v2h-3z"
     />
-    <path d="M30.73 24a6.47 6.47 0 01.45-2.19c.337-.9.52-1.85.54-2.81a8.55 8.55 0 00-.54-2.81 6.47 6.47 0 01-.45-2.19 9.2 9.2 0 01.62-2.49c.53-1.57 1.08-3.19.08-4.2-1-1.01-2.41-.44-3.52.05a5.59 5.59 0 01-2.09.64 5.3 5.3 0 01-.59 0L16 .28 6.77 8a5.3 5.3 0 01-.59 0 5.59 5.59 0 01-2.09-.65C3 6.87 1.6 6.25.57 7.31c-1.03 1.06-.45 2.63.08 4.2A9.2 9.2 0 011.27 14a6.47 6.47 0 01-.45 2.19A8.55 8.55 0 00.28 19c.02.96.203 1.91.54 2.81A6.47 6.47 0 011.27 24a9.2 9.2 0 01-.62 2.49c-.53 1.57-1.08 3.19-.08 4.2.353.38.852.59 1.37.58a5.67 5.67 0 002.15-.63A5.59 5.59 0 016.18 30a7.13 7.13 0 012.29.47 8 8 0 002.62.53 7.37 7.37 0 002.47-.51A7.14 7.14 0 0116 30a6.24 6.24 0 012.14.45 8 8 0 002.77.55 8.08 8.08 0 002.77-.55 6.24 6.24 0 012.14-.45 5.59 5.59 0 012.09.65c1.11.49 2.49 1.11 3.52.05 1.03-1.06.45-2.63-.08-4.2a9.2 9.2 0 01-.62-2.5zM21.17 7h-.26a8 8 0 00-2.77.55A6.24 6.24 0 0116 8a6.24 6.24 0 01-2.14-.45A8 8 0 0011.09 7h-.26L16 2.72 21.17 7zm8.89 22.27a4.42 4.42 0 01-1.34-.46 7.08 7.08 0 00-2.9-.82 8.14 8.14 0 00-2.78.55 6.13 6.13 0 01-2.13.45 6.24 6.24 0 01-2.14-.45A8 8 0 0016 28a9 9 0 00-3.08.6 5.74 5.74 0 01-1.83.4 6.36 6.36 0 01-2-.43A8.72 8.72 0 006.18 28a7.08 7.08 0 00-2.9.82 9.65 9.65 0 01-1.28.52 6.08 6.08 0 01.52-2.21c.403-1 .65-2.055.73-3.13a8.55 8.55 0 00-.54-2.81A6.47 6.47 0 012.27 19a6.47 6.47 0 01.44-2.19c.337-.9.52-1.85.54-2.81a10.48 10.48 0 00-.72-3.13 9 9 0 01-.59-2.16H2c.447.1.88.255 1.29.46a7.08 7.08 0 002.9.82A8.14 8.14 0 009 9.44 6.13 6.13 0 0111.09 9a6.13 6.13 0 012.13.45A8.14 8.14 0 0016 10a8.14 8.14 0 002.78-.55A6.13 6.13 0 0120.91 9a6.13 6.13 0 012.09.44 8.14 8.14 0 002.78.55 7.08 7.08 0 002.9-.82A9.65 9.65 0 0130 8.66a6.08 6.08 0 01-.52 2.21c-.403 1-.65 2.055-.73 3.13.02.96.203 1.91.54 2.81a6.47 6.47 0 01.44 2.19 6.47 6.47 0 01-.44 2.19 8.55 8.55 0 00-.54 2.81c.078 1.074.32 2.13.72 3.13a9 9 0 01.59 2.16v-.02z" />
+    <path d="M30.73 24a6.47 6.47 0 0 1 .45-2.19c.337-.9.52-1.85.54-2.81a8.55 8.55 0 0 0-.54-2.81 6.47 6.47 0 0 1-.45-2.19 9.2 9.2 0 0 1 .62-2.49c.53-1.57 1.08-3.19.08-4.2-1-1.01-2.41-.44-3.52.05a5.59 5.59 0 0 1-2.09.64 5.3 5.3 0 0 1-.59 0L16 .28 6.77 8a5.3 5.3 0 0 1-.59 0 5.59 5.59 0 0 1-2.09-.65C3 6.87 1.6 6.25.57 7.31c-1.03 1.06-.45 2.63.08 4.2A9.2 9.2 0 0 1 1.27 14a6.47 6.47 0 0 1-.45 2.19A8.55 8.55 0 0 0 .28 19c.02.96.203 1.91.54 2.81A6.47 6.47 0 0 1 1.27 24a9.2 9.2 0 0 1-.62 2.49c-.53 1.57-1.08 3.19-.08 4.2.353.38.852.59 1.37.58a5.67 5.67 0 0 0 2.15-.63A5.59 5.59 0 0 1 6.18 30a7.13 7.13 0 0 1 2.29.47 8 8 0 0 0 2.62.53 7.37 7.37 0 0 0 2.47-.51A7.14 7.14 0 0 1 16 30a6.24 6.24 0 0 1 2.14.45 8 8 0 0 0 2.77.55 8.08 8.08 0 0 0 2.77-.55 6.24 6.24 0 0 1 2.14-.45 5.59 5.59 0 0 1 2.09.65c1.11.49 2.49 1.11 3.52.05 1.03-1.06.45-2.63-.08-4.2a9.2 9.2 0 0 1-.62-2.5ZM21.17 7h-.26a8 8 0 0 0-2.77.55A6.24 6.24 0 0 1 16 8a6.24 6.24 0 0 1-2.14-.45A8 8 0 0 0 11.09 7h-.26L16 2.72 21.17 7Zm8.89 22.27a4.42 4.42 0 0 1-1.34-.46 7.08 7.08 0 0 0-2.9-.82 8.14 8.14 0 0 0-2.78.55 6.13 6.13 0 0 1-2.13.45 6.24 6.24 0 0 1-2.14-.45A8 8 0 0 0 16 28a9 9 0 0 0-3.08.6 5.74 5.74 0 0 1-1.83.4 6.36 6.36 0 0 1-2-.43A8.72 8.72 0 0 0 6.18 28a7.08 7.08 0 0 0-2.9.82 9.65 9.65 0 0 1-1.28.52 6.08 6.08 0 0 1 .52-2.21c.403-1 .65-2.055.73-3.13a8.55 8.55 0 0 0-.54-2.81A6.47 6.47 0 0 1 2.27 19a6.47 6.47 0 0 1 .44-2.19c.337-.9.52-1.85.54-2.81a10.48 10.48 0 0 0-.72-3.13 9 9 0 0 1-.59-2.16H2c.447.1.88.255 1.29.46a7.08 7.08 0 0 0 2.9.82A8.14 8.14 0 0 0 9 9.44 6.13 6.13 0 0 1 11.09 9a6.13 6.13 0 0 1 2.13.45A8.14 8.14 0 0 0 16 10a8.14 8.14 0 0 0 2.78-.55A6.13 6.13 0 0 1 20.91 9a6.13 6.13 0 0 1 2.09.44 8.14 8.14 0 0 0 2.78.55 7.08 7.08 0 0 0 2.9-.82A9.65 9.65 0 0 1 30 8.66a6.08 6.08 0 0 1-.52 2.21c-.403 1-.65 2.055-.73 3.13.02.96.203 1.91.54 2.81a6.47 6.47 0 0 1 .44 2.19 6.47 6.47 0 0 1-.44 2.19 8.55 8.55 0 0 0-.54 2.81c.078 1.074.32 2.13.72 3.13a9 9 0 0 1 .59 2.16v-.02Z" />
   </svg>
 );
-
 export const icon = OuiIconAppCanvas;
diff --git a/src/components/icon/assets/app_code.js b/src/components/icon/assets/app_code.js
@@ -10,22 +10,20 @@
  */
 
 import * as React from 'react';
-
 const OuiIconAppCode = ({ title, titleId, ...props }) => (
   <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="M11.276 29l.594 2H0l7.621-14.29.811 2.73L3.333 29h7.943zM28.92 31l-4.987-16.598A16 16 0 008.688 3l1.8 6H8.4L6 1h2.607a18 18 0 0117.241 12.828L31 31h-2.08z" />
+    <path d="m11.276 29 .594 2H0l7.621-14.29.811 2.73L3.333 29h7.943ZM28.92 31l-4.987-16.598A16 16 0 0 0 8.688 3l1.8 6H8.4L6 1h2.607a18 18 0 0 1 17.241 12.828L31 31h-2.08Z" />
     <path
       className="ouiIcon__fillSecondary"
-      d="M12.037 14.02L16.492 29h6.827l-2.333-7.849a10 10 0 00-8.949-7.13zM9.35 12h2.05a12 12 0 0111.503 8.581L26 31H15L9.35 12z"
+      d="M12.037 14.02 16.492 29h6.827l-2.333-7.849a10 10 0 0 0-8.949-7.13ZM9.35 12h2.05a12 12 0 0 1 11.503 8.581L26 31H15L9.35 12Z"
     />
   </svg>
 );
-
 export const icon = OuiIconAppCode;